javascript - 选择多种表单中的表单数据

Question

我有一个像这样的 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 仅适用于一个 id。我怎样才能做到这样我就可以点击任何表格？谢谢

Answer 1

使用以下代码。想法是为每个表单使用一个公共(public)类，并在该类上附加提交事件。

// 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>