jQuery - Ajax post request loads same page with form data added to URL

Question

I have a registration form in HTML, which I have attached below.

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <button id="myButton">Register</button>
</form>

I am trying to post the information from the form when someone fills it out to a python API which will then insert the information to a MySQL Database.

I want the functionality of the required and patterns in the HTML.

I am using jQuery 3.1.1 and Ajax to post the form data to the API.

My JQuery/Ajax is attached below:

$("#registerForm").submit(function() 
{
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
});

I think this should work however if I fill out the form and click the Register Button it reloads the page and just adds the form information to the URL.

An example of this is :

URL_GOES_HERE/register.html?guestFName=Joe&guestLName=Bloggs&guestEmail=bloggs%40gmail.com&guestPhone=087-1111111&guestPassword=TestPassword1

Why is this behaving like this?

All help is extremely appreciated

EDIT: e.preventDefault(); doesn't fix the issue.

One thing that is missing in your submit function is the `event.preventDefault()` function. If you add that the page should not be reloaded. See for example [this post](http://stackoverflow.com/questions/20352799/ajax-form-submit-with-preventdefault) — Locco0_0, Mar 07 '17 at 16:35
What happens when you use preventDefault()? Still appends the data to the url? — DeclanPossnett, Mar 07 '17 at 16:45
And the 'URL_GOES_HERE' is replaced with a different url to the current html file? — DeclanPossnett, Mar 07 '17 at 16:48
'URL_GOES_HERE' is replaced with the url to the Python API which is hosted on PythonAnywhere — Fendec, Mar 07 '17 at 16:49
I'm comparing to a similar solution I've created and this should work! hmmmmm — DeclanPossnett, Mar 07 '17 at 16:51
Try to change dollar sign `$` with `jQuery` everywhere like: `jQuery("registerForm").submit(function(e) { e.preventDefault(); jQuery.ajax(...); .... }`. Are you sure `$` belongs to `jQuery`? Open the console window and type `$.fn.jquery`. If you don't get `3.1.1`, or the version loaded, then dollar sign does not belong to `jQuery`. — Christos Lytras, Mar 10 '17 at 15:06
Maybe obvious but I've been burned by this before. Is your JS on the page or running in a script? If it's in a script and no changes are happening, your browser may have cached it and you'll need to do a hard refresh. — wafs, Mar 16 '17 at 07:47
You're missing `e.preventDefault();` at the end of the `submit` handler. Check my answer. — Ronen Cypis, Mar 16 '17 at 11:01
try adding `return false` in the end of the `submit` function — Shiran Dror, Mar 16 '17 at 14:58

score 4 · Accepted Answer · answered Mar 15 '17 at 06:13

I think you should use <input type='button'> instead <button> and just use .click() event of that <input type='button'> as below.

Change

<button id="myButton">Register</button>

To

<input type='button' id='btnRegeister' value='Register'/>

And in JS

Change

$("#registerForm").submit(function()

To

$("#btnRegeister").click(function()

So your entire code become as below now ..

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <input type='button' id='btnRegeister' value='Register'/>
</form>

$(document).ready(function(){
    $("#btnRegeister").click(function() 
    {
       $.ajax(
       {
           url: "URL_GOES_HERE",
           data: $('#registerForm').serialize(),
           type: 'POST',
           async: false
       })
       .done(function(response) 
       {
           console.log(response);

           var result = JSON.parse(response);      
       })
   });
});

Try Above code, it is working for me

You're right, the form is posted and the jquery code not executed in the question. — Weenesta - Mathieu Dormeval, Mar 16 '17 at 14:47

DeclanPossnett · Answer 2 · 2017-03-07T16:58:47.507

1

EDIT: You should include the 'type' attribute to your HTML:

<button type="submit" name="submit"></button>

Using the 'preventDefault' function will prevent the default form submit / redirect- This will stop the unintended behavior

$("#registerForm").submit(function(e) 
{
    e.preventDefault(); // Add this

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $(this).serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);
        var result = JSON.parse(response);      
    })
});

edited Mar 07 '17 at 16:58

answered Mar 07 '17 at 16:41

DeclanPossnett

376
1
5
13

I am still getting the same issue even with the type attribute on the button. – Fendec Mar 07 '17 at 17:10
1

The default value of `type` in `button` tag is `submit`. Hence the first clause isn't valid. – 31piy Mar 10 '17 at 11:38

score 0 · Answer 3 · answered Mar 07 '17 at 16:35

0

you need a preventDefault() to prevent the default behaviour of the form

$("#registerForm").submit(function(e) 
{
    e.preventDefault();

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
});

answered Mar 07 '17 at 16:35

Sepultura

997
1
9
28

and the selector $("#registerForm") finds the current form-element? – Sepultura Mar 07 '17 at 16:38
It should do but I think that could be part of the problem. – Fendec Mar 07 '17 at 16:39
No errors appear and even my console.logs don't appear so perhaps it isn't getting into it – Fendec Mar 07 '17 at 16:40
I know haha seriously confused at this. – Fendec Mar 07 '17 at 16:45

score 0 · Answer 4 · answered Mar 07 '17 at 17:10

0

are you working on Safari browser by any chance?? because it is the only browser that i know who doesn't support required and pattern attributes and he will send the form any way if it is the case i can give you a good solution if not the only option you have is to remove the form tag and fire the ajax request on button click.

answered Mar 07 '17 at 17:10

Souhail Ben Slimene

616
9
15

I am working on Firefox and Chrome. I switched from one to the other becuase I thought that maybe it was an issue with the browser but it wasn't. – Fendec Mar 07 '17 at 17:12
i am working on some site and i have form built like the way you want it, open this link and click on the send button if an alert shows up that means the problem is in your code if not then it is your browser's problem. here is the form link http://locationvacancesmaamoura.com/vinaigre/contact – Souhail Ben Slimene Mar 07 '17 at 17:17

31piy · Answer 5 · 2017-03-11T04:17:36.497

There are a couple of hints, which I assume, may get it work.

Wrap your jQuery code into $(function() { ... }.
Don't use async: false with your jQuery AJAX call.
Use event's stopPropagation() and preventDefault() to prevent the form submit event to bubble up.

Other than these, I didn't change anything and got your form to work. I used HTTPBin to post your data, and got appropriate response.

Here is a fiddle of the same.

$(function() {

  $("#registerForm").submit(function(e) {
    e.stopPropagation();
    e.preventDefault();

    $.ajax({
        url: "https://httpbin.org/post",
        data: $('#registerForm').serialize(),
        type: 'POST'
      })
      .done(function(response) {
        console.log(response);
        //var result = JSON.parse(response);
      });
  });

});

score 0 · Answer 6 · answered Mar 10 '17 at 16:01

Check if dollar sign $ belongs to jQuery by typing this $.fn.jquery to the console window. If you don't get the jQuery version like 3.1.1, then jQuery isn't loading or something else gets to be assigned to the dollar $ sign.

Change your code as this here:

jQuery(function($)
{
    $("#registerForm").submit(function(e) 
    {
        console.log('Form submitting');
        e.preventDefault();

        $.ajax(
        {
            url: "URL_GOES_HERE",
            data: $('#registerForm').serialize(),
            type: 'POST',
            async: false
        })
        .done(function(response) 
        {
            console.log(response);

            var result = JSON.parse(response);      
        })
    });
});

Also, is doesn't really matters, but try to add POST method to your form just to check this case:

<form id="registerForm" method="POST">
    <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
    <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
    <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
    <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
    <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
    <br>
    <button id="myButton">Register</button>
</form>

And try to submit your form after you check the console window for errors.

score 0 · Answer 7 · answered Mar 14 '17 at 18:37

I recommend you delete the "button" tag and use "a" tag with some css to transform this "a" tag in a button (For example with "btn" class from bootstrap)

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <a class="btn btn-default">Register</a>
</form>

Then in your JS code:

$("#registerForm a").click(function() 
{

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
})

This is misleading. Changing `button` to `a` is not required at all. Plus, it adds extra burden of including the relevant CSS. — 31piy, Mar 16 '17 at 04:34

score 0 · Answer 8 · answered Mar 16 '17 at 06:13

0

It seems like other event has been triggered when the form submit, try event.stopImmediateProgapation() or your event is behind another event which will reload the page in event queue.

answered Mar 16 '17 at 06:13

LeonDWong

11
3

score 0 · Answer 9 · answered Mar 16 '17 at 08:31

0

You can stop default behaviour of submit by using: e.preventDefault()

$("#registerForm").submit(function(e) 
{
    e.preventDefault();
    console.log("it doesn't reload")
    // your ajax call
});

Hope it's helpfull! ;)

answered Mar 16 '17 at 08:31

Radonirina Maminiaina

6,958
4
33
60

score 0 · Answer 10 · answered Mar 16 '17 at 09:59

You are doing submit form by ajax so form_id.submit() is not a good one ! If you want to do form submit by button clicked as ajax format ,catch click event with button id and add preventDefault() or return false from preventing page load.

$("#myButton").click(function(e) 
{
    e.preventDefault();
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    });
    //return false;
});

Ronen Cypis · Answer 11 · 2017-03-16T11:05:35.990

You need to prevent the default behavior of the form by adding e.preventDefault(); (after recieving the e as a param) to the end of your .submit handler like so:

$("#registerForm").submit(function(e)  //  <-- Add the e as param
{
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
    e.preventDefault();   //  <-- Here is where the magic happens
});

The e.preventDefault(); prevents the actual native submission of the form (the page reload...)

Ram Depala · Answer 12 · 2017-03-16T14:44:06.587

0

Try this:

$(document).on('submit','form',function(){
   // code
   $.ajax({
    url: "URL_GOES_HERE",
    data: $('#registerForm').serialize(),
    type: 'POST',
    async: false
   }).done(function(response){
    console.log(response);
    var result = JSON.parse(response);      
   })
});

edited Mar 16 '17 at 14:44

answered Mar 16 '17 at 11:31

Ram Depala

51
3

score -1 · Answer 13 · answered Mar 15 '17 at 03:30

-1

I am able to replicate and fix your problem with NodeJS, Express, Multer and Internet Edge.

When I edit:

<form id="registerForm">

to

<form method="post" id="registerForm">

I am also sending it a valid Response with Express.

answered Mar 15 '17 at 03:30

allegory

124
1
1
10

I was just stating what I was using in my environment. You have to make sure you send a valid response when submitting a form or strange things can happen to the browser. Also my fix is with plain HTML. – allegory Mar 16 '17 at 16:32

jQuery - Ajax post request loads same page with form data added to URL

13 Answers13