在多个表单中选择表单数据答案

【问题标题】：Select form data in multiple forms在多个表单中选择表单数据
【发布时间】：2017-10-04 15:56:22
【问题描述】：

我有一个这样的 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。我怎样才能使它可以点击任何表格？谢谢

【问题讨论】：

标签： javascript php jquery arrays forms

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

像这样使用jquery。最好使用tagname或classname而不是表单的ID。因为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>

【讨论】：