How to handle form submission using ajax (jQuery)

Question

I've a php form

<form action="" method="POST">
    <input id="input1" name="key" type="text">
    <input id="input2" name="name" type="text">
    <button id="btn" type="button">Enter</button>
</form>

I want to submit the form using ajax so this is how I do it

$('#btn').click(function(){
    var input1 = $('#input1').val();
    var input2 = $('#input2').val();
    var pass = 'val1='+input1+'&val2='+input2;
    $.ajax({
        type: "POST",
        url: "process.php",
        data: pass,
        success: function(data){
          //success;
        }
     });
});

My problem is, when the form has several input items, I've to give an id for every item apart from retrieving it's value using $('#input1').val() and I think this is a cumbersome method.

So is there a way better than this to handle the form in ajax, probably which does not needing to give an id for every input item and instead retrieve the values at the processing file using the input item name just like a php normal form submission works using a submit button?

Stéphane Bebrone · Accepted Answer · 2011-12-07 07:31:01Z

2

The jQuery Form plugin is very nice to handle such case.

answered Dec 7, 2011 at 7:31

Stéphane Bebrone

2,76317 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ptamzz Over a year ago

What's the difference between ajaxForm() and ajaxSubmit() here?

Stéphane Bebrone Over a year ago

From the documentation, ajaxForm doesn't submit the form but only prepare it. In your case, ajaxSubmit seems appropriate.

Collectives™ on Stack Overflow

How to handle form submission using ajax (jQuery)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related