How to send dynamic form's data using Jquery

Question

I've multiple dynamic forms in a single web page like as follows

<form name='login' id='login_1'>
<input type='text' name='username'/>
<input type='password' name='pwd'/>
<input type='submit' name='submit' id='submit_1' value='Login'/>
</form>
<form name='login' id='login_2'>
<input type='text' name='username'/>
<input type='password' name='pwd'/>
<input type='submit' name='submit' id='submit_2' value='Login'/>
</form>
.......
.......

Here id's are dynamic,suppose if user's enters data in second form and submits then I need to send second(only) form data to server without using third party jQuery plugins,here I'm unable to select submit button id properly.

Is it secure process to send data using serializeArray();, especially for login process ?

Carol Skelly · Accepted Answer · 2013-05-18 13:48:40Z

5

One way would be to attach a function $('form').submit() and put your ajax POST to server code there...

$('form').submit(function(){
    var thisForm = $(this);
    alert(thisForm.find("input[type=submit]").attr("id"));

    // perform ajax call here
    // $(ajax). ---

    return false;
});

Here is a demo http://www.bootply.com/61682

edited May 18, 2013 at 13:48

answered Apr 8, 2013 at 14:48

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

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

Comments

Rosmarine Popcorn · Accepted Answer · 2013-04-08 15:15:56Z

2

Unless you have form's without files than it is just fine to serialize form inputs.

You can catch the submit event and pass data's using ajax

$("form").submit(function(){
   var action = $(this).attr("action");
   //You Can add an input type hidden to store form id, in case you need it at Server
   $(this).append("<input type='hidden' name='id' value='"+$(this).attr("id")+"'>");
   var data = $(this).serializeArray();
   $.post(action,data,function(data){
     //server response
     console.log(data);
   });
});

answered Apr 8, 2013 at 15:15

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

1 Comment

streak Over a year ago

what if i have to submit form with file via ajax using a dynamic form, with other input fields details ??

Collectives™ on Stack Overflow

How to send dynamic form's data using Jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related