選擇表格數據

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>