submission of bootstrap form with dynamic form ids - php

Question

I am listing user's records along with edit link, upon clicking on edit link bootstrap modal form loads
My Page has following code (not sure if there is any better way to create modal dynamically)
after changes when user submits modal form, modal will disappeared and update message will be shown on users.php page
but my alert box shows same form id for every modal's submit button i click (i.e. the first modal's form id) and shows blank datastring (form seriralize)
I want to pass respective form's data to process.php
below is part of my users.php
<?php whlie($row=mysql_fetch_array($result)){?>
<div id="editkey" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h3>Edit users Details</h3>
</div>
<div>
<form id="keyfrm<?=$row['id'];?>">
<fieldset>
<input type="hidden" name="keyid" value="<?=$row['id'];?>">
<div class="modal-body">
<ul class="nav nav-list">
<li class="nav-header text-left"><p>Name :</p></li>
<li class="nav-header text-left"><p><input type="text" name="name"></p></li>
</ul>
</div>
<fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">submit</button>
Close
</div>
I have js file that contains
$(document).ready(function(){
$('#submit').click(function() {
var formID = $('form').attr('id');
alert(formID);
var datastring = $(this).closest('form').serialize(); // may be working
alert(datastring);
$.ajax({
type: 'POST',
url: 'update_user.php',
data: datastring ,
success: function(msg) {
alert(msg);
var data=msg.split('|');
$(data[0]).modal('hide');
$('#result').html('');
$('#result').fadeOut("slow");
if(data[1]==='Success'){
$('#result').css('background-color','#DDF9B3');
$('#result').text("Data is updating...please wait for changes to take effect");
window.setTimeout(function(){location.reload()},3000)
}else{
$('#result').css('background-color','#FE9898');
$('#result').text("Error Occured");}
//$('#result').html(msg);
$('#result').fadeIn("slow");
$("#result").delay(4200).fadeOut(800);
}
});
event.preventDefault();
});
});
any help will be appreciated

Answer 1

Get the formID same way you get the data:
var formID = $(this).closest('form').attr('id');
alert(formID);
var datastring = $(this).closest('form').serialize();