Question

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

当你点击第一个复选框，复选框消失并更新数据库（好）时出现问题，但是当用户点击第二个复选框时，第一个复选框再次在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();
?>

Answer 1

事实上，我不确定这是不是原因，但确实存在问题。

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

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

使用Jquery复选框发送多个表单

1 个答案: