Javascript 如何使用php和jquery选择多个下拉列表并将它们提交到数据库_Javascript_Php_Html_Jquery

Javascript 如何使用php和jquery选择多个下拉列表并将它们提交到数据库

javascript php html jquery

Javascript 如何使用php和jquery选择多个下拉列表并将它们提交到数据库,javascript,php,html,jquery,Javascript,Php,Html,Jquery,我有一个花名册计划。我选择了一个员工的名字，我选择了日期和他将要工作的地点，以及每个日期的班次（如果是白天还是晚上），然后将其提交给mysql。我设法实现了多日期选择，但现在我想选择多个站点，并选择与日期对应的移位类型。我不希望它们在提交到数据库时混淆范例 Name : James Date: 2020-12-16 Shift: Night Sitename : KFC Name : James Date: 2020-12-17 Shift: Day Sitename : McDonal

我有一个花名册计划。我选择了一个员工的名字，我选择了日期和他将要工作的地点，以及每个日期的班次（如果是白天还是晚上），然后将其提交给mysql。我设法实现了多日期选择，但现在我想选择多个站点，并选择与日期对应的移位类型。我不希望它们在提交到数据库时混淆

范例

Name : James Date: 2020-12-16 Shift: Night Sitename : KFC 
Name : James Date: 2020-12-17 Shift: Day Sitename   : McDonald's  
Name : James Date: 2020-12-28 Shift: Night Sitename : New Your City park 
Name : James Date: 2020-12-30 Shift: Day Sitename   : Airport

HTML:


名册
$（文档）.ready（函数（）{
var date_input=$（'input[name=“start_time”]）；//我们的日期输入名为“start_time”
var container=$（'.bootstrap iso form'）。长度>0？$（'.bootstrap iso form'）。父项（）：“body”；
var期权={
多日期：对，
格式：“yyyy-mm-dd”，
货柜:货柜,，
今天的亮点：没错，
自动关闭：错误，
};
日期输入。日期选择器（选项）；
});
$（函数（）{
$（“#站点名称”）。多选({
includeSelectAllOption:true
});
$（'#btnget'）。单击（函数（）{
//警报（$（'#sitenames'）.val（））；
})
});
迈克
古普塔
梅西
罗纳尔多
日期
选择白天或晚上
白天
夜
英国石油公司
壳
加德士
邮递

那么到底是什么问题？你试过缩小问题的范围吗？似乎你发布的大部分代码都与问题无关。当您为一个有6个占位符的查询传递4个参数时，您的查询似乎根本不应该工作。

 <html>
    <head>
    <title>Roster  </title>
    <meta charst="utf-8">
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    
    
    <!-- JS & CSS library of MultiSelect plugin 2020-12-15 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
      <link rel="stylesheet" href="bootstrap/css/multiselect.css" />  
    
    <!-- Jquery Multiselect Musa -->
    
    <!-- Bootstrap Date-Picker Plugin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
    
    <!-- jQuery-- multiselect -- >
    <!-- jQuery library -->
    <script type="text/javascript">
    $(document).ready(function(){
    var date_input=$('input[name="start_time"]'); //our date input has the name "start_time"
     var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
          multidate:true,
          format: 'yyyy-mm-dd',
            container: container,
            todayHighlight: true,
            autoclose: false,
          };
          date_input.datepicker(options);
        });
    </script>
    
    
    <script type="text/javascript">
    $(function() {
    $('#sitenames').multiselect({
    includeSelectAllOption: true
    });
    $('#btnget').click(function() {
    //alert($('#sitenames').val());
    })
    });
    </script>
    
    
    </head>
    <body>
    <!-- Form code begins -->
     <form method="post" action="md.php">
     <div id="peoplenames" style="padding:10px">
    <select name="personname" id ="personname">
    <option value="Mike">Mike</option>
    <option value="Gupta">Gupta</option>
    <option value="Messi">Messi</option>
    <option value="Ronaldo">Ronaldo</option>
    </select>
    
    </div>
     
      <div class="bootstrap-iso">
     <div class="container-fluid">
      <div class="row" >
       <div class="col-md-6 col-sm-6 col-xs-12">
        
          <div class="form-group" > <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="start_time" name="start_time" placeholder="MM/DD/YYY" type="text" />
          </div>
      </div>
          </div>
      </div>
          </div>
          
          
       <div id="divshift" style="padding:50px">
    <select name="shifttype[]" id ="shifttype" multiple="multiple" >
    <option value="">Select day or Night</option>
    <option value="Day">Day</option>
    <option value="Night">Night</option>
    </select>
    
    </div>   
       
       
       
          
    
    <div style="padding:100px">
    <select name="sitenames[]" id ="sitenames" multiple="multiple" >
    <option value="bp">BP</option>
    <option value="shell">Shell</option>
    <option value="caltex">Caltex</option>
    </select>
    
    </div>
    
    
    <div class="form-group" style="padding:150px" > <!-- Submit button -->
    <button class="btn btn-primary " name="btnroster" type="submit">post</button>
    </div>
    </form>
    <!-- Form code ends --> 
    <?php
    
    // php codes 
    $start_time1 =(isset($_POST['start_time']))? trim ($_POST['start_time']):'';
    $empid =(isset($_POST['personname']))? trim ($_POST['personname']):'';
    
    
      
     if(isset($_POST['btnroster'])){ // button starts here 
         
    
    $start_time2 = explode(",",$start_time1);
     foreach ($_POST['shifttype'] as $shifttype){ // shifts day anad night 
     foreach ($_POST['sitenames'] as $siteid){ // site  
    foreach($start_time2 as $start_time){  // dates foreach 
    
    $query ='INSERT INTO tbljobassignment(empid, siteid,shifttype,start_time)
    VALUES
    (:empid, :siteid,:shifttype,:start_time)';
    $insert=$con->prepare($query);
    $insert->execute(array(
    ':empid'=>$empid,
    ':siteid'=>$siteid,
    ':shifttype'=>$shifttype,
    ':start_time'=>$start_time));
    } // site ide loop 
    
    } // End of foreach loop 
      
      
      
      
      
      } // First foreach ends here 
      } // second foreach eands here 
      } // 
      }//button ends here 
      
         ?>
    
     
    
    </body>
    </html>