JavaScript — выберите данные формы в нескольких формах
у меня есть цикл php, как это:
<?php foreach($result as $row) { ?>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<?php } ?>
Он выведет форму в каждом цикле.
Вот мой код JavaScript:
document.getElementById("appointment-single-form").onsubmit = function (e) {
ev.preventDefault();
var queryString = $('#appointment-single-form').serialize();
console.log(queryString); // output to console: user-id={user's id from the specific form that was clicked/submitted}
}
В зависимости от формы, которую щелкнули / отправили, мне нужно получить значения формы, используя javascript.
Вопрос: Только первая форма работает, потому что getElementById работает только для одного идентификатора. как я могу сделать так, чтобы я мог нажать на любую форму? Спасибо
Решение
Используйте следующий код. Идея состоит в том, чтобы использовать общий класс для каждой формы и прикрепить событие submit к этому классу.
// Attach submit event on class, that is common for each form
$('.my-forms').on('submit',function(ev){
ev.preventDefault();
var curObj = $(this),queryString = curObj.serialize();
console.log(queryString);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="post" name="my-form1" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="1">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form2" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="2">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form3" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="3">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>Другие решения
с помощью jquery как это. Лучше использовать tagname или же classname вместо идентификатора формы. Потому что Id это уникальный
$(document).on('submit' ,'form',function(e){
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})
пример
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>detector