使用 implode 和 ajax 插入复选框值

Question

我想插入我的复选框值，我不知道如何使用 ajax 获取所有值并使用 implode 将它们插入一行。

// this is my javascript where i take the data ,

function saveData() {
  var modsubj = $('#modalsubject').val();
  var modsect = $('#modalsection').val();
  var modday = $('#modalday').val();
  var modstart = $('#modalstarttime').val();
  var modend = $('#modalendtime').val();
  var moduser = $('#userID').val();

  $.ajax({
    type: "POST",
    url: "modal.funcs.php?p=add",
    data: "subj=" + modsubj + "&sect=" + modsect + "&day=" + modday + "&start=" + modstart + "&end=" + modend + "&user=" + moduser
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" id="modalday[]" name="modalday[]" value="M">Monday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" id="modalday[]" name="modalday[]" value="T">Tuesday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" id="modalday[]" name="modalday[]" value="W">Wednesday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" id="modalday[]" name="modalday[]" value="Th">Thursday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" id="modalday[]" name="modalday[]" value="F">Friday &nbsp;&nbsp;
  </label>
</div>

这是我的 php 函数，我使用了 implode 函数，这样我就可以将数据插入一行。

$page = isset($_GET['p'])?$_GET['p']:'';
  if($page=='add'){
      foreach ($_POST['day'] as $key => $value) {
        $subj = $_POST['subj'];
        $sect = $_POST['sect']; 
        $day = implode("",$_POST['day']); 
        $strTime = $_POST['start'];
        $endTime = $_POST['end'];
        $user_id = $_POST['user'];
      }

        $auth_user->createSchedule($subj,$sect,$day,$strTime,$endTime,$user_id);
        $schedRow = $auth_user->readSchedule();

  } else if ($page=='edit') {

  }

Answer 1

这里是如何向服务器发送列表

你可以分解一天得到一个天数组

要添加更多项目，请添加逗号和更多键值：

 data: { day: modday.join(","),
         subj:$('#modalsubject').val() // no comma on the last
       }

$(function() {
  $("#save").on("click", function() {
    saveData();
  });
});

function saveData() {
  var modday = [];
  $('.modalday:checked').each(function() {
    modday.push(this.value);
  });
  console.log(modday);
  $.ajax({
    type: "POST",
    url: "modal.funcs.php?p=add",
    data: { day: modday.join(",") }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" class="modalday" name="modalday[]" value="M">Monday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" class="modalday" name="modalday[]" value="T">Tuesday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" class="modalday" name="modalday[]" value="W">Wednesday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" class="modalday" name="modalday[]" value="Th">Thursday &nbsp;&nbsp;
  </label>
</div>
<div class="checkbox">
  <label class="checkbox-inline">
    <input type="checkbox" class="modalday" name="modalday[]" value="F">Friday &nbsp;&nbsp;
  </label>
</div>
<button id="save">Save</button>

Answer 2

我自己尝试过，我认为大部分操作都可以在您的 saveData 函数中发生，而不是在 PHP 中。

我假设你会将你的 id 改为一个类，因为 id 应该是唯一的：

<input type="checkbox" class="modalday" name="modalday[]" value="M">Monday &nbsp;&nbsp;

看看这个：

function saveData() {
  var modsubj = $('#modalsubject').val();
  var modsect = $('#modalsection').val();

  var moddayAll = document.getElementsByClassName('modalday');

  var modday = [];

  for (let i = 0; i < moddayAll.length; i++) {
    if (moddayAll[i].checked) {
      modday.push(moddayAll[i].value);
    }
  }

  var modstart = $('#modalstarttime').val();
  var modend = $('#modalendtime').val();
  var moduser = $('#userID').val();

  var add = 'add';

  $.post("modal.funcs.php", {p:add, subj:modsubj, sect:modsect, day:modday.join(","), start:modstart, end:modend, user:moduser},
    function( data ) {
      // do whatever you want with data returned from modal.funcs.php
    }
  );

};

我只是使用 vanilla JavaScript 来选择所有 modalday 元素，然后循环遍历它们并将检查的值（M、T、W 等）添加到 modday 数组中：

  var moddayAll = document.getElementsByClassName('modalday');

  var modday = [];

  for (let i = 0; i < moddayAll.length; i++) {
    if (moddayAll[i].checked) {
      modday.push(moddayAll[i].value);
    }
  }

然后，由于您仍然使用 POST 方法，我使用了 JQuery 的 .post()，并将“p”参数与数据一起传递，而不是在查询字符串中传递。您会注意到，这也是 modday 数组通过 join() 调用转换为字符串的地方：

  var add = 'add';

  $.post("modal.funcs.php", {p:add, subj:modsubj, sect:modsect, day:modday.join(","), start:modstart, end:modend, user:moduser},
    function( data ) {
      // do whatever you want with data returned from modal.funcs.php
    }
  );

然后，在 modal.funcs.php 中，您可以从 $_REQUEST 变量中获取值并将它们传递给您的函数：

<?php

$page = $_REQUEST['p'];

if ($page == 'add') {

  $subj = $_REQUEST['subj'];
  $sect = $_REQUEST['sect']; 
  $day = $_REQUEST['day']; 
  $strTime = $_REQUEST['start'];
  $endTime = $_REQUEST['end'];
  $user_id = $_REQUEST['user'];

  $auth_user->createSchedule($subj,$sect,$day,$strTime,$endTime,$user_id);
  $schedRow = $auth_user->readSchedule();

} else if ($page=='edit') {

}

$_REQUEST['day] 将是已选中复选框值的逗号分隔字符串。如果您需要在此处对数组进行进一步处理，您可以添加另一个步骤来执行此操作。