Form submit without refresh using jquery/ajax if page have more than one form

Question

Hi all I know that its very easy to submit a form without refreshing if there is only one form on the page but what about if there are more than one form on the page. Im using the following code for form submission and it works ok if there is only one form on the page. How can I change it to make it work when there are multiple forms on the page. Thanks in advance.

function processForm() { 
        $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}

<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>

It should work on multiple forms. Can you post some more HTML? — David Hellsing, Aug 19 '12 at 12:51
Hi David thanks for the answer the code is just repeating itself from db. so basically im retrieving clients details from the db. Here is the link for the sample: http://design05.comuf.com/test-form.php — London Boy, Aug 19 '12 at 13:50

M Khalid Junaid · Accepted Answer · 2014-02-28T21:58:54.393

Just customize your function and add params like formid to get form data within the function to pass processForm("id of the form");

function processForm(formId) { 
    //your validation code
    $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: $("#"+formId).serialize(), 
            success: function(data) {
                $('#message').html(data);
            }
        } );
    }

<form action="" id="form1" method="post" onsubmit="processForm('form1');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

<form action="" id="form2" method="post" onsubmit="processForm('form2');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form3" method="post" onsubmit="processForm('form3');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>

Thanks all for answers and especially Dianuj thats what I needed. — London Boy, Aug 19 '12 at 23:12
Hi Dianuj on my page I have a status div which shows the status for the clients. A user can select the status with a dropdownbox. So how can I display a status for each client. I can do $('#status-info').html(data); but this only does it for the first div it doesnt have any other effects. Thanks. — London Boy, Aug 21 '12 at 10:58
Please note that both inline scripting and returning false are bad ideas. Returning false stops event propagation, which might break other event handlers. — , Sep 22 '15 at 07:11

score 3 · Answer 2 · edited Jul 26 '13 at 21:39

What you have should work on multiple forms, however it would be better and a lot easier to debug if apply the event listener using jQuery instead:

$('form').submit(processForm); // listen to each form’s submit

function processForm(e) { 
    e.preventDefault(); // prevents default submit action
    $.ajax( {
        type: 'POST',
        url: form_process.php,
        data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
        success: function(data) {
            $('#message').html(data);
        }
    } );
}

HTML (without the ugly onsubmit attribute):

<form action="" method="post">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

Abhishek · Answer 3 · 2012-08-20T04:50:56.490

2

Add form_id while calling processForm(form_id) and using the id serialize the form.

function processForm(form) { 
    $.ajax( {
        type: 'POST',
        url: form_process.php,
        data: $(form).serialize(),
        success: function(data) {
            $('#message').html(data);
        }
    } );
    return false;
}
<form action="" method="post" onsubmit="processForm(this)">
  <input type="text" name="user_name" id="user_name1" value="">
  <input type="submit" name="submit" value="submit" >
</form>
<form action="" method="post" onsubmit="processForm(this)">
  <input type="text" name="user_name" id="user_name2" value="">
  <input type="submit" name="submit" value="submit" >
</form>
<div id='message'></div>

jsFiddle

edited Aug 20 '12 at 04:50

answered Aug 19 '12 at 16:26

Abhishek

838
1
6
9

Hi Abhishek thanks for the answer but it didnt work there is something wrong in the javascript I guess. The forms didnt have closing tags and I changed that but still didnt work. I tried it like this: – London Boy Aug 19 '12 at 18:21
hope you know serialize() function uses the form id. it should be $("form_to_be_submitted's_id").serialize() – Femi Oni Aug 19 '12 at 21:47

score 2 · Answer 4 · answered Feb 11 '13 at 17:51

just thought I'd add to this, if you have multiple forms on one page, you can set a function to act on all forms independently by getting the form's action value. As follows (tested with jQuery 1.8.3):

 $('form').submit(function(){
   var action = $(this).attr("action")
   $.ajax({
     url: action,
     type:'POST',
     data: $(this).serialize(),
     success: function(){
            //alert message
        }                   
     })
   return false
 })

Hope this helps someone out!

Form submit without refresh using jquery/ajax if page have more than one form

4 Answers4

Linked