辅助JS表单提交电话

Question

I have a primary JS that posts a code from a form on the home page, then the user gets a secondary form to update details and they hit update on a second form.

Everything works smoothly until the second selection of Submit (known as Update button on my site).

Here is the update page:

<div class="welcomersvp"><h2>Welcome <?php echo $PrimGuestSalutation; ?>!</h2></div><br>

        <form name="updatersvpform" id="updatersvpform">

///Skipped form data to be concise

<div class="rsvp-button text-center"><button type="submit" class="hvr-sweep-to-right">Update</button>

And here is the JS handler:

(function ($) {
    'use strict';
    $("#updatersvpform").submit(function (event) {

        event.preventDefault();

        $("#updateloading").css("display", "inline-block");
        $.post("updatersvp.php", {
                updateaddress1: $("#updateaddress1").val()
            })
            .done(function (data) {
                if (data) {
                    $("#updateloading").hide();
                    $("#UpdateSuccess").slideDown("slow");
                    setTimeout(function () {
                        $("#FullField").slideUp("slow");
                    }, 1500);
                    setTimeout(function () {
                        $("#FullField").html(data);
                    }, 2300);
                    setTimeout(function () {
                        $("#FullField").slideDown("slow");
                    }, 3500);

                    $("#updatersvpform")[0].reset();
                }
                else {
                    $("#updateloading").hide();
                    $("#UpdateError").slideDown("slow");
                    setTimeout(function () {
                        $("#UpdateError").slideUp("slow");
                    }, 1000);
                }
            });

    });
})(jQuery);

When I hit update, it just reloads the primary page with all the variables in the actual address bar. No reference to the php page (which doesn't seem to be receiving anything).

Answer 1

Without the rest of the code shown in your question, I am going to assume that the second form is loaded in as a DOM object and that the javascript for its submission was already loaded beforehand.

If this is the case then change

$("#updatersvpform").submit(function (event)

to

$('body').on('submit', '#updatersvpform', function(event)

The difference is that the latter is as a delegation to watch for DOM content changes of the target (#updatersvpform) within the scope of a parent object (body tag).