I am trying to submit this form without refreshing the page , but when i submit it takes me to action page. what is wrong with my code? This is my form:

<form class="ajax" action="/../addchannel/createUser.php" method="post" >
<input type="text" name="userName" placeholder="userName"><br>
<input type="text" name="email" placeholder="email"><br>
<input  type="submit" value="submit" >
</form>';

And this is my script:

$('form.ajax').on('submit', function () {
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
$.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
});
});

I am trying to submit this form without refreshing the page , but when i submit it takes me to action page. what is wrong with my code? This is my form:

<form class="ajax" action="/../addchannel/createUser.php" method="post" >
<input type="text" name="userName" placeholder="userName"><br>
<input type="text" name="email" placeholder="email"><br>
<input  type="submit" value="submit" >
</form>';

And this is my script:

$('form.ajax').on('submit', function () {
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
$.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
});
});

• javascript
• php
• jquery
• ajax
• forms

6 Answers 6

Pass event as argument and use event.preventDefault().

Example

$('form.ajax').on('submit', function (e) {
      e.preventDefault();

You forgot return false at the end or prevent default.

 $('form.ajax').on('submit', function (event) {
    event.preventDefault();
var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
   ....
  //or return false;
    
});

Use e.preventDefault() or return false; to prevent form submitting

$('form.ajax').on('submit', function (e) {//Pass the event argument here
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
   $.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
   });
 e.preventDefault(); 
 //OR
return false;
});

Use event.preventDefault()

$('form.ajax').on('submit', function (e) {
    e.preventDefault();
    //code here
});

Using jQuery ajax is not preventing browser to follow Form Action page. To achieve this, you should prevent browser to do it by simple function: e.preventDefault()

Here is you code:

//Pass the event argument (e)
$('form.ajax').on('submit', function (e) { 
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
$.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
});

//Prevent Browser to follow form action link:
e.preventDefault();

//you can use also
// return false;

});

try this..

<form method='post' action="javascript:mail();" >
<input type="text" class="input-large" id="user_name" name="name">
<input type="text" class="input-large" id="email" name="name">
<button type="submit" class="btn btn-primary">Submit</a>
</form>

function mail()
{
var name = $("#user_name").val();
var email = $("#email").val();
$.ajax({
                type:       "POST",
                url:        "contact.php",
            data:        "name=" + name+"&customer_mail="+email,
                success:    function(html) {
            //do ur function
                }

            });


}