AJAX POST form is changing page

366

November 21, 2016, at 7:06 PM

This is driving me bonkers, I'm sure it's a silly little error but I can't see it - could one of you geniuses embarrassed me & point it out please?

The form is posting like a regular form, i.e. changing page when I want it to submit inline like JQuery should do.

JQUERY:

        $("#emailPromoter").submit(function(e) {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax( {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) {
                    $('#venueForm').html( JSON.stringify( data ) );
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log( errorThrown );  
                }
            });
            e.preventDefault();
        });

HTML:

    <form name="emailPromoter" class="mobFrm" method="post" id="emailPromoter" action="submit/?id=<?= $intId ?>">
    <fieldset>
        <legend>Contact form</legend>
        <p><label for="name">Name <span class="red">*</span></label><input required name="name" type="text" id="name" /></p>
        <p><label for="email">Email <span class="red">*</span></label><input required name="email" type="email" id="email" /></p>
        <p><label for="confirmEmail">Confirm Email <span class="red">*</span></label><input required name="confirmEmail" type="email" id="confirmEmail" /></p>
        <p><label for="tel">Tel</label><input name="tel" type="tel" id="tel" /></p>
        <p><label for="address">Address</label><textarea name="address" rows="5" id="address"></textarea></p>
        <p><label for="message">Message <span class="red">*</span></label><textarea required name="message" rows="5" id="message"></textarea></p>
    </fieldset>
    <p><label>&nbsp;</label><input name="submit" id="submitForm" type="submit" class="submit" value="Send message" /></p>
</form>
<div id="response"></div>

Somebody save me from certain insanity?

Thank you.

Update: Still looking at it. I don't think the function is being called

Answer 1

you can add return false; instead of e.preventDefault();

Answer 2

Solved it through fiddling around with it, not sure exactly how but this was my jquery in the end:

        $("#emailPromoter").submit(function(e) {
            var postData = $(this).serialize();
            var formURL = $(this).attr("action");
            $.ajax( {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) {
                    $('#venueForm').html( data );
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log( errorThrown );  
                }
            });
            e.preventDefault();
        });