1

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)
    }
});
});

6 Answers 6

4

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

Example

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

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;
    
});
4
  • it i put event.preventDefault(); nothing happens and submit button stops working:( Oct 24, 2013 at 11:41
  • did u try with return false ??
    – bipen
    Oct 24, 2013 at 11:51
  • yes i used boyh event.preventDefault(); and return false. and if i add these button stops working , nothing happens . Oct 24, 2013 at 12:02
  • use one .. either preventDefault or return false
    – bipen
    Oct 24, 2013 at 12:03
1

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;
});
1
  • little help how can do something like this $( ".list #"+clickedId ).remove(); Oct 24, 2013 at 11:48
1

Use event.preventDefault()

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

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;

});
4
  • if i put event.preventDefault(); nothing happens and submit button stops working:( Oct 24, 2013 at 11:41
  • what is your url in $.ajax call?
    – zur4ik
    Oct 24, 2013 at 13:01
  • from this form : <form class="ajax" action="/../addchannel/createUser.php" method="post" > url = that.attr('action'), Oct 24, 2013 at 13:04
  • check console. do you get responce from this ajax call?
    – zur4ik
    Oct 24, 2013 at 13:11
1

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
                }

            });


}
2
  • but it takes value of one input field . Oct 24, 2013 at 11:46
  • but with my code , i can add any no of input field , without adding anything in my script :) Oct 24, 2013 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.