选择表格数据

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

使用下面的代码。 Idea对每个表单使用一个普通的类，并在该类上附加提交事件。

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

Answer 2

使用jquery这样.Better使用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>