使用 Jquery Checkbox 发送的几种表单

Posted 2023-05-09

【中文标题】使用 Jquery Checkbox 发送的几种表单

【英文标题】：Several Forms send with Jquery Checkbox

【发布时间】：2016-09-22 05:36:51

【问题描述】：

我在一个页面中有多个表单（由 mysql 数据填充，因此可以是一个或 100 个），当用户单击复选框时，每个表单都会提交一个复选框值。我正在使用 Jquery 执行此操作，因此复选框消失并在该特定 ID 上发送 UPDATE 而无需重新加载页面。

当您单击第一个复选框时，问题出现了，该复选框消失并更新 DB（好），但是当用户单击第二个复选框时，第一个复选框在 DB 上再次更新，而不是第二个单击。

我已经尝试了很多事情，我尝试移动容器（认为这是一个 z-index 问题，因为复选框只是隐藏的）但即使没有隐藏 div，第一次更新也会更新，直到用户刷新页面。

初始脚本

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitFormData() 
    var feedBackCheckbox = $("#feedBackCheckbox").val();
    var feedBackID = $("#feedBackID").val();
    $.post("submit.php",  feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID ,
    function(data) 
     $('#results').html(data);
     $('#myForm')[0].reset();
    );

function SubmitFormData2() 
    var feedBackCheckbox = $("#feedBackCheckbox2").val();
    var feedBackID = $("#feedBackID").val();
    $.post("submit.php",  feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID ,
    function(data) 
     $('#results').html(data);
     $('#myForm')[0].reset();
    );

function SubmitFormData3() 
    var feedBackCheckbox = $("#feedBackCheckbox3").val();
    var feedBackID = $("#feedBackID").val();
    $.post("submit.php",  feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID ,
    function(data) 
     $('#results').html(data);
     $('#myForm')[0].reset();
    );

</script>

表格

<form id="myForm" method="post">
    <input type = "hidden" value = "1" name = "feedBackID" id = "feedBackID">
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/>
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/>
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/>
   </form>
   <form id="myForm" method="post">
    <input type = "hidden" value = "2" name = "feedBackID" id = "feedBackID2">
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/>
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/>
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/>
   </form>
   <form id="myForm" method="post">
    <input type = "hidden" value = "3" name = "feedBackID" id = "feedBackID3">
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/>
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/>
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/>
   </form>
   <br/>
   Update Display..... <br />
   ==============================<br />
   <div id="results">
   <!-- All data will display here  -->
   </div>

更新文件

<?php
    echo $feedBackID = $_POST['feedBackID'];
    echo $feedBackCheckbox = $_POST['feedBackCheckbox'] ."<br />";
    echo "==============================<br />";
    echo "All Data Submitted Successfully!";
?>


<?php
include ('config.php');

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) 
    die("Connection failed: " . $conn->connect_error);
 

$sql = "UPDATE user_order_item_feedback SET feedback_value = '$feedBackCheckbox' WHERE id = $feedBackID";

if ($conn->query($sql) === TRUE) 
    echo "New record created successfully";
 else 
    echo "Error: " . $sql . "<br>" . $conn->error;


$conn->close();
?>

【问题讨论】：

您不能有相同 ID 的输入元素。现在 jQuery 获取给定 ID 的第一个输入，这就是您遇到问题的原因。如果您以指定的形式搜索输入，则需要在该形式中搜索，而不是在整个文档中搜索。

你所有的表单都有相同的 id，这就是你发布到第一个表单的原因，你尝试拉这个的方式你应该将 jQuery deferred 与你的 ajax 帖子结合起来。由于所有表单都由 submit.php 处理，为什么不使用带有所有这些复选框的表单。对于选定的，您可以运行更新脚本。

【参考方案1】：

事实上，我不确定这是否是原因，但这肯定是个问题。

您的 HTML 中不应有多个具有相同 id 的元素。

在大多数情况下，这仅考虑具有此 id 的第一个项目。