AjaxForm can't redirect to thank you popup page

Support
1

Hi,
I’m trying to make this code work but form.hide() doesn’t work as it should…
Maybe some of you have already done this and can help me with this issue which I can’t figure out by myself at all :frowning: just stuck.
This is my JS

 $(document).on("submit","af_complete", "form", function () {
        var e = $(this),
            t = !1;
        return (
            e.find("input").removeClass("error"),
            e.find("input").parent().removeClass("error"),
            e.find('[name="phone"]').each(function () {
                "" == $(this).val() && ($(this).addClass("error"), $(this).parent().addClass("error"), (t = !0));
            }),
            t ||
                $.ajax({ url: "action.php", type: "POST", dataType: "json", data: e.serialize() })
                    .done(function (e) {
                        $.fancybox.close("all"),form.hide(),
                            $.fancybox.open({ src: "#thanks" }),
                            setTimeout(function () 
                            {
                                $.fancybox.close("all");
                            }, 3e3),
                            $("input, textarea").val("");
                    })
                    .always(function () {
                        $("input[type=submit], button[type=submit]").removeAttr("disabled");
                    })
                    .fail(function (e) {
                        console.log(e);
                    }),
            !1
        );
    });

and this div block I’m trying to show after successful sending

<div class="modal" id="thanks">
		<div class="modal__title">
			Thanks!
		</div>
		<div class="modal__image">
			<svg class="ico-success">
				<use xlink:href="assets/img/sprites.svg#success"></use>
			</svg>
		</div>
		<div class="modal__footer">
			We will contact you
		</div>
	</div>

This is my form itself

<div class="modal" id="product">
<form id="prod_form" action="" method="post">
		    <input type="hidden" name="form" >
			<div class="modal__sub">
				Contact form
			</div>
			<div class="modal__title" id="modal-title" >
				leave your message here
			</div>
			<div class="modal__content">
				<div class="form-group">
					<label for="">name</label>
					<input type="text" name="name" value="[[+fi.name]]">
				</div>
				<div class="form-group">
					<label for="">phone</label>
					<input type="tel" name="phone" value="[[+fi.phone]]">
				</div>
				<div class="form-group">
					<button type="submit" class="btn">
						<svg class="ico-phone">
							<use xlink:href="assets/img/sprites.svg#arrow-right"></use>
						</svg>
						<span>send</span>
					</button>

				</div>

			</div>



</form>
</div>
2

I’m a bit confused by your code.

Do you use the MODX extra AjaxForm or do you use a custom solution to send your form with AJAX?
Why do you make your own AJAX request with $.ajax(...)?

In general, the variable form is never defined in your code.

If you indeed use the extra AjaxForm, then you probably have to use code similar to the one from the documentation:

$(document).on('af_complete', function(event, response) { // on the event af_complete
    var form = response.form; // get the form from the response
    if (form.attr('id') == 'prod_form') { // check the form id
        form.hide(); // hide the form
    }
});
3

I’m using an extra one and probably that’s the thing. My extra code works well as landing HTML/CSS/JS and I can send emails using PHPMailer by calling in my $ajax the url : send.php where I store all needed values + credentials and I’m getting email without problem.
So I decided to make it a dynamic with MODX, I uploaded everything and make chunks and tv’s and I found out that it’s super cool and easy until I faced a few problems. My PHPMail form is not working at all and it responds with Error 500 which is a bit strange. I’ve configured all rules in .htaccess according to the documentation but still have no luck with send.php file. So I thought that it was a kinda restriction due to the security of MODX.
After a few research, I find that there are a few solutions one is FormIt and another is AjaxForm so I installed FormIt + AdjaxForm and tried to do the same with no luck again.
I’ve tried this code and it workes but with strange behavior :

$(document).on('af_complete', function(event, response) { // on the event af_complete
    var form = response.form; // get the form from the response
    if (form.attr('id') == 'prod_form') { // check the form id
        form.hide(); // hide the form
    }
});

I’m assigned the ID for the form and use form.hide(), and after sending the email it clears the form but not closing it so I just see the white popup window instead of closing one. or ideally to have a successful message would be awesome.
Also, I’ve used systemMessage = ‘Successfully send’ and it appears only on the right corner of my dimmed background with a Popup window so the user will barely see it, so it’s not an option for me either.

I can’t delete my $adjax call cuz I didn’t write it and it’s bound to other functions as well ad, to be honest, I’m tooooo newbie to understand clearly how JavaScript should work.
Is there any solution to use the send.php with PHPMailer without additional configuration on MODX?
Thanks.

4

It’s difficult to give concrete advice without having your specific code.

If send.php is a custom file on the file system, then you should be able to call that from the frontend without interference from MODX. Error 500 implies that there is probably a syntax error in your code.

Usually it’s easier to create a new resource in MODX (instead of a custom file) and execute a snippet on it. Then you request this resource from the frontend.

form.hide(); is just the example code from the documentation. If you need other things to happen after the form is sent, change the code in the function.

So what does the file “action.php” do?