Inserting values to the database with hidden fields and checkbox - php

Question

Good day!
Im currently having problems with inserting values with checkbox and hidden field. Any tips or solutions are greatly appreciated.
So my problem is this: I have a form with only checkboxes in it and a submit button and If I check one of the values in a checkbox a hidden upload field will be displayed the hidden value must be connected to the chosen value in the checkbox. How can I insert the hidden value to the corresponding checkbox value in a database. For example
HTML:
<label class="form-check-label">
<input class="form-check-input" name="value[]" type="checkbox" value="Venue">
Value 1
<div id="hidden_fields">
This is hidden: <input type="text" id="hidden_one" name="hidden_one[]">
</div>
</label>
<br>
<label class="form-check-label">
<input class="form-check-input" name="value[]" type="checkbox" value="Venue">
Value 2
<div id="hidden_fields">
This is hidden: <input type="text" id="hidden_one" name="hidden_one[]">
</div>
</label>
<br>
PHP:(Updated) This is what I have now. when I dont check the 1st checkbox. the hidden_one in the 2nd checkbox isnt inserting
foreach($_POST['value'] as $key=>$value ){
$hidden_one = $_POST["hidden_one"][$key];
$sql = "INSERT INTO sample (value, hidden_one) VALUES ('$value','$hidden_one')";
$result = mysqli_query($connection, $sql);
}
If I check value 1 and entered a sample1 in the hidden form and I check value 2 and entered a sample2 in the hidden form. sample 1 must be in the same column as value 1 and sample 2 must be in the same column as value 2. its not inserting properly
UPDATE:
So I changed the code into this
foreach($_POST['value'] as $key=>$value ){
$hidden_one = $_POST["hidden_one"][$key];
but the problem is sometimes its not inserting correctly. Sometimes hidden_one is empty in the database. I'm really lost at the moment. Can't find a solution elsewhere.
This is my updated form
Im seeing a pattern, when I skipped a checkbox like I check value1 then skip value2 then check value3. value3 hidden isn't inserted. Still not solved :( lol this is driving me crazy. at the verge of quitting. lol

Answer 1

One way you could insert the value of your checkbox into your hidden input fields, is by making a click function that takes $(this).val(), which is your clicked elements value. You can then put that value into a variable. You then go to target the parent element/container for the targeted checkbox and find the corresponding input field. You then simply set the value of that input field with the declared value of the checkbox.
Note that the notation for this JavaScript is in jQuery, and you will need to include a jQuery library in order for this solution to work.
$(document).ready(function () {
$('[name="value[]"]').click(function(){
var mySelect=$(this).val();
if( $(this).prop('checked') ) {
$(this).parent().find('input[name="hidden_one[]"]').val(mySelect);
}
else {
$(this).parent().find('input[name="hidden_one[]"]').val("");
}
})
});
Example:
$(document).ready(function () {
$('[name="value[]"]').click(function(){
var mySelect=$(this).val();
if( $(this).prop('checked') ) {
$(this).parent().find('input[name="hidden_one[]"]').val(mySelect);
}
else {
$(this).parent().find('input[name="hidden_one[]"]').val("");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="form-check-label">
<input class="form-check-input" name="value[]" type="checkbox" value="Venue 1">
Value 1
<div id="hidden_fields">
This is hidden: <input type="text" id="hidden_one" name="hidden_one[]">
</div>
</label>
<br>
<label class="form-check-label">
<input class="form-check-input" name="value[]" type="checkbox" value="Venue 2">
Value 2
<div id="hidden_fields">
This is hidden: <input type="text" id="hidden_one" name="hidden_one[]">
</div>
</label>
<br>
Direct JS Fiddle link
When it comes to inserting the value(s) into the database, it's hard for me to give a concise answer, because I don't have any debugging information on your application, so I don't know if you have structered it properly. I would assume you have either an AJAX function or a form action to post your values. As you noted in your own attempt, is that the values come up as an array that you will have to loop through. However, I am uncertain of the nested foreach loops.
Let me know if you need any further assistance, and in that case, update your question with potential error messages, corresponding form/ajax code, and if your PHP file holds any other relevant information, add that too.
A rough example could be:
<?php
$hidden_one_array=array_values($_POST['hidden_one']); //our posted array
$i=0; // iterator
$length=count($hidden_one_array); //length of the array
while($i < $length) {
$sql="INSERT INTO sample (value, hidden_one) VALUES ('$value','$hidden_one_array[$i]')";
$result=mysqli_query($connection, $sql);
$i++;
}
?>
What we're doing here is basically looping through the array, using the iterator value as our index pointer to each respective array index to insert into the database.
Also note that you should probably look into prepared statements to prevent sql injection. You are already using mysqli_ so might as well take advantage of it.