【问题标题】:Save multiple row of checkbox value into database将多行复选框值保存到数据库中
【发布时间】:2015-08-01 11:24:02
【问题描述】:

我正在创建一个包含复选框的表单。一行有 5 个复选框。如果用户再添加一行,就会有另外 5 个复选框。

看起来像这样,

我使用的代码,

<tbody id="dataTable">
  <tr>
    <td>
      <input type="text" class="form-control" name="startTime[]">
    </td>
    <td>
      <input type="text" class="form-control" name="endTime[]">
    </td>
    <td>
      <input type="checkbox" name="Monday[0]" value="1">
    </td>
    <td>
      <input type="checkbox" name="Tuesday[0]" value="1">
    </td>
    <td>
      <input type="checkbox" name="Wednesday[0]" value="1">
    </td>
    <td>
      <input type="checkbox" name="Thursday[0]" value="1">
    </td>
    <td>
      <input type="checkbox" name="Friday[0]" value="1">
    </td>
    <td>
      <input type="button" class="btn btn-danger" value="Delete" onClick="deleteRow('dataTable')" />
    </td>
  </tr>
</tbody>

我用于将数据插入数据库的代码,

<?php
                if (mysqli_connect_errno($con)) {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                } else {
                    if ($_POST['startTime']) {
                    foreach ($_POST["startTime"] as $key => $value) {

                            $endTime = $_POST["endTime"][$key];
                            $monday = isset($_POST["Monday"][$key]) ? 1 : 0;
                            $tuesday = isset($_POST["Tuesday"][$key]) ? 1 : 0;
                            $wednesday = isset($_POST["Wednesday"][$key]) ? 1 : 0;
                            $thursday = isset($_POST["Thursday"][$key]) ? 1 : 0;
                            $friday = isset($_POST["Friday"][$key]) ? 1 : 0;
                           

                            $sql = "INSERT INTO timetableschedule ( startTime, endTime, Monday, Tuesday, Wednesday, Thursday, Friday) " .
                                    "VALUES ('$value', '$endTime', '$monday', '$tuesday', '$wednesday', '$thursday', '$friday')";
                            mysqli_query($con, $sql);
                    }
                    }

                    echo "1 record added";
                    mysqli_close($con);
                }
                ?>

假设我按照上图所示的方式提交表单,我在数据库中得到了这个结果,

假设与时间“1600 1700”出现在“1400 1500”行上的值。我希望将值相应地保存为选定的值。

【问题讨论】:

  • 将复选框的名称更改为day[]。这样$_POST['day'] 的值就变成了一个包含真假信息的数组,其中每一行都与输入中的行相对应。将日期替换为实际日期。
  • 基本上你在问:具有行和添加按钮的表单,以及提交按钮。从收到的复选框提交值。我说的对吗?
  • 其他选项,在 Javascript 中循环遍历行并以 JSON 格式发布。
  • @Mouser 我不清楚如何使用 JSON
  • 您是如何获得您的 html 代码的?以及如何在按钮单击时添加新行?

标签: javascript php database checkbox


【解决方案1】:

编辑:删除零 (name="Monday[]") 不会解决问题,因为未提交未选中的单选或复选框元素。

我会考虑在生成行时为您的复选框名称添加索引,例如:

  <input type="checkbox" name="Monday[0]" value="1">

  <input type="checkbox" name="Tuesday[0]" value="1">

...

  <input type="checkbox" name="Monday[1]" value="1">

  <input type="checkbox" name="Tuesday[1]" value="1">

...

  <input type="checkbox" name="Monday[2]" value="1">

  <input type="checkbox" name="Tuesday[2]" value="1">

这样你的 PHP 循环应该可以工作

【讨论】:

  • 同样的事情,值没有正确进入数据库
  • 这可能是由于您使用foreach 循环它的方式造成的。
  • @Mouser 一直在尝试循环它的方法,但这已经是我能做到的最好的了
【解决方案2】:

JSON 方式:

function sendFunction()
{
  //tr
  var checkboxJSON = {};
  var i = 0;
  var tr = $("#dataTable > tr").each(function(){
      //checkboxes
      checkboxJSON[i] = {};
      $(this).find("input[type='checkbox']").each(function(){
          
          if ($(this).is(':checked'))
          {
            checkboxJSON[i][$(this).attr("name")] = 1;
          }
          else
          {  
            checkboxJSON[i][$(this).attr("name")] = 0;
          }
      });
      i++;
  });
  
  var checkboxData = JSON.stringify(checkboxJSON); //send this to the server as checkboxdata!
  console.log(checkboxData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="dataTable">
    <tr>
      <td>
        <input type="text" class="form-control" name="startTime[]">
      </td>
      <td>
        <input type="text" class="form-control" name="endTime[]">
      </td>
      <td>
        <input type="checkbox" name="Monday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Tuesday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Wednesday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Thursday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Friday" value="1">
      </td>
      <td>
        <input type="button" class="btn btn-danger" value="Delete" onClick="deleteRow('dataTable')" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="form-control" name="startTime[]">
      </td>
      <td>
        <input type="text" class="form-control" name="endTime[]">
      </td>
      <td>
        <input type="checkbox" name="Monday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Tuesday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Wednesday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Thursday" value="1">
      </td>
      <td>
        <input type="checkbox" name="Friday" value="1">
      </td>
      <td>
        <input type="button" class="btn btn-danger" value="Delete" onClick="deleteRow('dataTable')" />
      </td>
    </tr>
  </tbody>
  </table>

<input type="button" class="btn btn-danger" value="Send" onClick="sendFunction('dataTable')" />

为您的解决方案。上班:

  1. 为表单设置隐藏输入。
 <input type="hidden" value="{}" name="checkboxes" />
  1. 在表单上使用 onSubmit 事件
 <form id="formDates" action="file.php" method="post" onSubmit="checkForm" />   
  1. 用复选框代码编写提交函数:
 function checkForm(e)
 {
     e.preventDefault(); //prevents form from being sent to early

     var checkboxJSON = {};
     var i = 0;
     var tr = $("#dataTable > tr").each(function(){
         //checkboxes
         checkboxJSON[i] = {};
         $(this).find("input[type='checkbox']").each(function(){

            if ($(this).is(':checked'))
            {
              checkboxJSON[i][$(this).attr("name")] = 1;
            }
            else
            {  
                checkboxJSON[i][$(this).attr("name")] = 0;
            }
         });
         i++;
      });

      $("input[type='hidden']").val(JSON.stringify(checkboxJSON)); //save this to the hidden input.
     document.getElementById("formDates").submit(); //submit all the data.
 }
  1. 在 PHP 中,您可以使用 json_decode() 将此数据重建为数组
$checkboxes = json_decode($_POST['checkboxes'], true); //use true to set it as an array.
foreach ($_POST["startTime"] as $key => $value) {

        $endTime = $_POST["endTime"][$key];
        $monday = $checkboxes[$key]['Monday']; //key should refer to an INT. 0 for the first row.
        $tuesday = $checkboxes[$key]['Tuesday'];
        $wednesday = $checkboxes[$key]['Wednesday'];
        $thursday = $checkboxes[$key]['Thursday'];
        $friday = $checkboxes[$key]['Friday'];


        $sql = "INSERT INTO timetableschedule ( startTime, endTime, Monday, Tuesday, Wednesday, Thursday, Friday) " .
                "VALUES ('$value', '$endTime', '$monday', '$tuesday', '$wednesday', '$thursday', '$friday')";
        mysqli_query($con, $sql);
}    

【讨论】:

  • 未定义索引:复选框;未定义索引:startTime;为 foreach() 提供的参数无效;
  • @Raymond,我已经为您提供了额外的说明,因此您可以尝试实现它。我的解决方案不是量身定制的,您必须实施并使其适应您的代码。
  • 其实没什么。我的复选框代码应该在的地方:D
  • 为什么需要给表单设置隐藏输入?
  • 因为这是复选框数据发送到服务器时的存储位置。
猜你喜欢
  • 2021-12-07
  • 1970-01-01
  • 1970-01-01
  • 2017-03-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-29
  • 2011-08-23
相关资源
最近更新 更多