mardi 24 mai 2016

Several Forms send with Jquery Checkbox

I have several forms in a page (populated by mysql data, so it can be one or 100), each form submits a checkbox value when user click on said checkbox. I'm doing this with Jquery so the checkbox disappear and sends the UPDATE on that specific ID without reloading the page.

The problem comes when you click the first checkbox, the checkbox disappears and UPDATE the DB (good), but when user click on a second checkbox the first one gets Updated again on DB and not the second one clicked.

I have tried many things, i tried moving the container (thinking it was a z-index problem, since checkboxes are only hidden) but even without hiding the div the first update gets updating until user refresh the page.

Initial Script

<script src="http://ift.tt/rs8qB8"></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>

Forms

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

Update File

<?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();
?>




Aucun commentaire:

Enregistrer un commentaire