使用implode和ajax插入复选框值

时间:2017-02-05 15:43:23

标签: javascript php jquery ajax checkbox

我想插入我的复选框值,我不知道如何使用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') {

  }

2 个答案:

答案 0 :(得分:0)

以下是如何将列表发送到服务器

你可以爆炸一天来获得一系列日子

要添加更多项目,请添加逗号和更多键值:

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

&#13;
&#13;
$(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(",") }
  });

}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我自己尝试过,我认为大多数操作都可以在你的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(),并通过了&#39; p&#39; param与数据一起,而不是在查询字符串中。您会注意到这是将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 [&#39; day]将是一个逗号分隔的已检查复选框值的字符串。如果您需要在此处进一步处理数组,可以添加另一个步骤。