使用隐藏字段和复选框将值插入数据库

Question

美好的一天！ 我目前在使用复选框和隐藏字段插入值时遇到问题。非常感谢任何提示或解决方案。

所以我的问题是：我有一个只有复选框的表单和一个提交按钮，如果我选中复选框中的一个值，则会显示隐藏的上传字段，隐藏的值必须连接到所选的值在复选框中。如何将隐藏值插入数据库中相应的复选框值。例如

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：（更新）这就是我现在所拥有的。当我不选中第一个复选框时。第二个复选框中的 hidden_​​one 没有插入

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

}

如果我检查值 1 并在隐藏表单中输入 sample1，我检查值 2 并在隐藏表单中输入 sample2。样本 1 必须与值 1 位于同一列，样本 2 必须与值 2 位于同一列。它没有正确插入

更新： 所以我把代码改成了这个 foreach($_POST['value'] as $key=>$value ){ $hidden_one = $_POST["hidden_one"][$key]; 但问题有时是它没有正确插入。有时 hidden_​​one 在数据库中为空。我现在真的迷路了。在其他地方找不到解决方案。

This is my updated form

我看到一个模式，当我跳过一个复选框时，我检查 value1 然后跳过 value2 然后检查 value3。 value3 hidden 未插入。仍然没有解决:(哈哈，这让我发疯了。在戒烟的边缘。哈哈

Answer 1

您可以将复选框的值插入隐藏的输入字段的一种方法是创建一个单击函数，该函数采用$(this).val()，这是您单击的元素值。然后，您可以将该值放入变量中。然后，您转到目标复选框的 parent 元素/容器并找到相应的输入字段。然后，您只需使用复选框的声明值设置该输入字段的值。

请注意，此 JavaScript 的符号是 jQuery，您需要包含一个 jQuery 库才能使此解决方案正常工作。

$(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("");
        }
    })
});

例子：

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

在将值插入数据库时​​，我很难给出一个简洁的答案，因为我没有关于你的应用程序的任何调试信息，所以我不知道你是否有 structered它正确。我假设您有一个 AJAX 函数或一个表单操作来发布您的值。正如您在自己的尝试中指出的那样，这些值是作为一个数组出现的，您必须循环访问。但是，我不确定嵌套的 foreach 循环。

如果您需要任何进一步的帮助，请告诉我，在这种情况下，使用潜在的错误消息、相应的表单/ajax 代码更新您的问题，如果您的 PHP 文件包含任何其他相关信息，也请添加。

一个粗略的例子可能是：

<?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++;
}
?>

我们在这里所做的基本上是遍历数组，使用迭代器值作为索引指针，指向要插入数据库的每个数组索引。

还请注意，您可能应该查看准备好的语句以防止 sql 注入。你已经在使用 mysqli_ 所以不妨好好利用它。