Привет всем, я знаю, что его очень легко отправить форму без обновления, если на странице есть только одна форма, но как насчет наличия на странице более одной формы. Я использую следующий код для отправки формы, и он работает нормально, если на странице есть только одна форма. Как я могу изменить его, чтобы он работал, когда на странице есть несколько форм. Заранее спасибо.
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> Просто настройте свою функцию и добавьте параметры, такие как formid чтобы получить данные формы в функции для передачи 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>
То, что вам нужно, должно работать с несколькими формами, однако было бы лучше и намного проще отлаживать, если вместо этого использовать jQuery для прослушивателя событий:
$('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 (без уродливого атрибута onsubmit):
<form action="" method="post"> <input type='text' name='user_name' id='user_name' value='' /> <input type='submit' name='submit' value='submit'/> </form>
Добавьте form_id при вызове processForm(form_id) и используя id сериализации формы.
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
просто подумал, что я добавлю к этому, если у вас есть несколько форм на одной странице, вы можете установить функцию, чтобы действовать на все формы независимо, получив значение action формы. Как следует (тестируется с помощью 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 })
Надеюсь, это поможет кому-то!