I have a roster program. I select a name of an employee, I select the dates and the sites he will be working on and the shifts if its day or night for each date and submit it to mysql. I managed to implement multidate selection but now I want to select multiple sites and shift type corresponding to the dates. I don't want them to mix up when they are submitted to the database.
Example
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:
<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>