从多个表单动态获取表单 ID 及其字段值

Question

在表中，我使用基于数据库内数据的循环创建了多个表单。现在我没有找到一种方法来实现一个逻辑，我想确定哪个表单提交按钮被按下，这样我就可以在数据库中相应地更新数据。

我所做的是把那个特定行的ID作为提交按钮ID，但我不知道如何把相同的ID在javascript文件(单独的文件)获取字段的详细信息，有人可以帮助吗?

<?php
foreach ($get_subscribed_data as $filtered_items) { ?>
<tr>
<form id="<?php echo $filtered_items->id; ?>" method="POST">
<td><input type="text" class="form-group" id="user_account_name" value="<?php echo $filtered_items->user_account_name; ?>"><?php echo $filtered_items->user_account_name; ?></td>
<td><input type="text" class="form-group" id="user_project_name" value="<?php echo $filtered_items->user_project_name; ?>"><?php echo $filtered_items->user_project_name; ?></td>
<td><input type="text" class="form-group" id="start_date" value="<?php echo $filtered_items->start_date; ?>"><?php echo $filtered_items->start_date; ?></td>
<td><input type="text" class="form-group" id="due_date" value="<?php echo $filtered_items->due_date; ?>"><?php echo $filtered_items->due_date; ?></td>
<td><input type="submit" id="<?php echo $filtered_items->id; ?>" class="btn-primary btn-sm">Submit</button></td>
</tr></form>
<?php } ?>

更新:

我使用的jQuery代码:

$(document).ready(function() {
$('.row-submit').on('click', e => {
alert('test');
e.preventDefault();
let $tr = $(e.target).closest('tr');

$.ajax({
type: "POST",
url: ajaxurl,
action: "send_modification_training_data",
data: {
user_account_name: $tr.find('.user_account_name').val(),
user_project_name: $tr.find('.user_project_name').val(),
start_date: $tr.find('.start_date').val(),
due_date: $tr.find('.due_date').val(),
},
success: response => {
console.log(response);
} 
});      
});
});

Answer 1

我假设您正在使用AJAX发送表单数据，否则您不需要知道提交了哪个表单，因为浏览器会为您整理数据。

要检索与所单击的提交按钮相关的数据，您需要更正HTML。首先，您需要从PHP循环中生成的HTML中删除所有id属性，因为它将创建无效的重复值，它们必须是唯一的。将它们改为类。其次，不能将form元素作为tr元素的子元素。

事实上，考虑到您在这里使用table，您根本不能使用form，因为没有办法使HTML有效。您需要整理每一行的input数据。为此，可以使用closest()查找与button相关的tr，并使用find()检索input值。像这样:

<?php foreach ($get_subscribed_data as $filtered_items) { ?>
<tr>
<td>
<input type="text" class="form-group user_account_name" value="<?php echo $filtered_items->user_account_name; ?>">
<?php echo $filtered_items->user_account_name; ?>
</td>
<td>
<input type="text" class="form-group user_project_name" value="<?php echo $filtered_items->user_project_name; ?>">
<?php echo $filtered_items->user_project_name; ?>
</td>
<td>
<input type="text" class="form-group start_date" value="<?php echo $filtered_items->start_date; ?>">
<?php echo $filtered_items->start_date; ?>
</td>
<td>
<input type="text" class="form-group due_date" value="<?php echo $filtered_items->due_date; ?>">
<?php echo $filtered_items->due_date; ?>
</td>
<td>
<button type="button" class="btn-primary btn-sm row-submit">Submit</button>
</td>
</tr>
<?php } ?>

$('.row-submit').on('click', e => {
e.preventDefault();
let $tr = $(e.target).closest('tr');

$.ajax({
url: 'your-handler.php',
type: 'POST',
data: {
user_account_name: $tr.find('.user_account_name').val(),
user_project_name: $tr.find('.user_project_name').val(),
start_date: $tr.find('.start_date').val(),
due_date: $tr.find('.due_date').val(),
},
success: response => {
console.log(response);
} 
});      
});