使用implode和ajax插入复选框值

Question

​

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

};

我只是使用普通的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将是被选中的复选框的值的逗号分隔字符串。如果您需要在此处进一步处理数组，可以添加另一个步骤来执行此操作。