Show email id field on selecting a particular dropdown not working - javascript

Under Label responsibility select box if i choose others then i have to get an email id input box otherwise it should be hidden. But the email id field under the div i.e showMe, is showing on selecting Individual as well as others but not supervisors. I want it show only for others.I have Tried many combinations but I have no clue why this may not be working . Any clue why this is not working?
My HTML code is:
<!-- Main content -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<style>
tr > td
{
padding-bottom: 1em;
}
#showMe{
display:none;
}
</style>
<section class="content-header">
<h1>
Add a new checklist
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li>My Requests</li>
<li>Resignation Requests</li>
<li class="active">Add Resignation Request</li>
</ol>
</section>
<div class="container-fluid">
<div class="row">
<!-- Thought Day-->
<div class="panel wrapper clearfix m-b-none">
<div class="panel-body">
<input type="hidden" id="page_name" value="requests">
<?php if($error_message!=''){?>
<div class="success-message <?php echo $msg_class;?>"><?php echo $error_message;?> </div>
<?php } else { ?>
<?php $row = $rows[0] ;
if(isset($row['grievance_type'])) {
$grievancetype = $row['grievance_type'];
} else { $grievancetype = ''; }
?>
<!-- form start -->
<?php echo form_open('exits/my_resignation_request/'.$id,array('name'=>'addostcstevent','id'=>'addostcstevent','method'=>'post','autocomplete'=>'on','class'=>'form-horizontal'))?>
<?php echo form_hidden(array('id'=>$row->id,'action'=>$action));?>
<div class="box-body">
<input type="hidden" name="todays_date" readonly id="todays_date" value="<?php echo date('m/d/y');?>" class="form-control col-md-10" <?php if($USER->permissions[0] != 'all') { ?> readonly <?php } ?>>
<table>
<tr>
<td>
Action Item
</td>
<td>
<input placeholder="Action Item" class=" m-wrap col-md-8 form-control " id="action" type="text" name="action" value="" required/>
</td>
</tr>
<tr>
<td>
Category
</td>
<td>
<select class="default" id="category" name="category">
<option name="exit_type" value="" selected>Select a option</option>
<option name="exit_type" value="Managers">Managers</option>
<option name="exit_type" value="Admins">Admins</option>
<option name="exit_type" value="Employees">Employees</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td>
<label>Responsibility</label>
</td>
<td>
<select class="default" id="security_question" name="exit_type">
<option name="exit_type" value="" selected>Select a option</option>
<option name="exit_type" value="Individual">Individual</option>
<option name="exit_type" value="Supervisors">Supervisors</option>
<option name="exit_type" value="others">others</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Timelines for completion</label>
</td>
<td>
<div class="date" data-date="12-02-2012" data-date-format="mm-dd-yyyy" data-date-viewmode="years">
<input placeholder="Last working day" class=" m-wrap col-md-8 form-control " id="startdt" type="text" name="requested_date" value="<?php if($row->requested_date!='') echo date("d-m-Y",$row->requested_date); ?>" required/>
</td>
</tr>
</table>
<div id="showMe">
<table>
<tr>
<td>
Email ID
</td>
<td>
<input placeholder="Email" class=" m-wrap col-md-8 form-control " id="email" type="text" name="email" value="" required/>
</td>
</tr>
</table>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<?php
echo form_hidden('action',$action);
echo form_hidden('id',$id);
?>
<!--<button type="submit" class="btn btn-info pull-right" name="withdraw" style="margin:0px 10px" value="withdrawn">Withdraw Resignation</button>-->
<button type="submit" class="btn btn-info pull-right" style="margin:0px 10px">Submit</button>
</div><!-- /.box-footer -->
</form>
<?php } ?>
</div><!-- /.box -->
</div><!--/.col (right) -->
</div> <!-- /.row -->
<div class="modal fade" role="dialog" id="myLTAModal">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Alert!</h4>
</div>
<div class="modal-body">
<!-- modal content-->
<div class="panel-body">
<p>Ensure you refer to LTA guidelines before planning your trip. You will be required to submit your tickets as proof to avail LTA.</p>
</div>
</div>
<!-- modal content-->
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="leaveAllowedModal">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Alert!</h4>
</div>
<div class="modal-body">
<!-- modal content-->
<div class="panel-body">
<p class="allowed_text"></p>
</div>
</div>
<!-- modal content-->
</div>
</div>
</div>
</section><!-- /.content -->
<script>
/*$(document).ready(function(){
$('#reservation').daterangepicker();
})*/
</script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script>
var elem = document.getElementById("security_question");
elem.onchange = function(){
var hiddenDiv = document.getElementById("showMe");
hiddenDiv.style.display = (this.value == "Individual") ? "none":"none";
hiddenDiv.style.display = (this.value == "Supervisors") ? "none":"block";
hiddenDiv.style.hidden = (this.value == "others") ? "none":"none";
};
function parseDate(str) {
var mdy = str.split('/')
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
function daydiff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
$(document).ready(function(){
$("#startdt").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-90:+0",
startDate: new Date(),
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddt').datepicker('setStartDate', minDate);
});
$("#enddt").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-90:+0"
});
$("#enddt").change(function(){
if($("#startdt").val()!='' && $("#enddt").val()!='')
{
var startdt = $("#startdt").val();
var enddt = $("#enddt").val();
$("#daysleave").val(daydiff(parseDate(startdt), parseDate(enddt)));
if($("#grievance_type").val()!='0')
{
var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));
if(((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) && (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))&&(day_diff_today > parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{ } else {
$("#leaveAllowedModal").modal("show");
}
}
}
})
$("#grievance_type").change(function(){
if($("#startdt").val()!='' && $("#enddt").val()!='' && $("#grievance_type").val()!='0')
{
var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));
if(((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) && (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))&&(day_diff_today > parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{ } else {
$("#leaveAllowedModal").modal("show");
}
}
})
$(".date-picker").datepicker();
$("#optionsRadios1").click(function(){
$("#myLTAModal").modal("show");
})
$('#leaveAllowedModal').on('shown.bs.modal', function() {
var msg = '';
if((parseInt($("#daysleave").val()) > parseInt($("#grievance_type option:selected").attr("data-min"))) && (parseInt($("#daysleave").val()) < parseInt($("#grievance_type option:selected").attr("data-max"))))
{ } else {
msg = msg + "You wish you apply "+$("#daysleave").val()+" day of "+$("#grievance_type option:selected").text()+". Minimum and Maximum no. of Leaves allowed to take at a time are "+$("#grievance_type option:selected").attr("data-min")+" and "+$("#grievance_type option:selected").attr("data-max")+" respectively.";
}
var day_diff_today = daydiff(parseDate($("#today_dt").val()), parseDate($("#startdt").val()));
if((day_diff_today < parseInt($("#grievance_type option:selected").attr("data-approvaldays"))))
{
msg = msg + " No. of days of prior approval needed is " + $("#grievance_type option:selected").attr("data-approvaldays") + " days";
}
$(".allowed_text").html(msg);
})
});
</script>


You do not use to write the code for every data element. Just use the below one.
Javascript :
hiddenDiv.className = ((this.value == "others") ? "showDiv":"hideDiv");
CSS :
.showDiv{
display:block;
}
.hideDiv{
display:none;
}
html : <div id="showMe" class="hideDiv">

Related

how to preview input form of a modal in another modal before submit in php

I have 2 modal the first modal is to display the input form, and the second modal is to preview data that has been entered on the first modal before submission.
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action="" method="POST" name="form3">
<div class="modal-header">
<h5 class="modal-title text-left" id="exampleModalLongTitle">Start Swap</h5>
</div>
<div class="modal-body">
<div class="widget" id="swap">
<div class="col-md-12 mt-20 mb-20">
<div class="row">
<div class="col-md-5">
<h5><i class="fa fa-arrow-up fa-lg" aria-hidden="true" style="color: #8dc6fb"></i> SEND</h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_send"
name="currency_send" title="select" required onchange="past(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" selected="selected" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<!--<input type="number" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="(this.value - (this.value/100)*2)" required> -->
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="mySend()" required>
</div>
</div>
<p id="send_crypto"></p>
</div>
<div class="col-md-2 text-center" style="margin: auto; text-align: center;"><i class="fa fa-exchange fa-2x"></i></div>
<div class="col-md-5">
<br class="visible-xs">
<h5>RECEIVE <i class="fa fa-arrow-down fa-lg" aria-hidden="true" style="color: #5cb85c"></i></h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_receive"
name="currency_receive" title="select" required onchange="copyed(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" selected="selected" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="5" data-content="<img src='../img/xe_icon/XRP.png' width='30' height='30' class='imgrs'><span> Ripple XRP </span>">Ripple XRP</option>
<option value="6" data-content="<img src='../img/xe_icon/TRON.png' width='30' height='30' class='imgrs'><span> Tron TRX</span>">Tron</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="re_amt" placeholder="Amount in USD" class="form-control" id="c1" value="" onKeyUp="myRecieve()" required>
</div>
</div>
<p id="recieve_crypto"></p>
<script>
function copyed(b){
var bx = b.options[b.selectedIndex].value;
if(bx==1){
document.getElementById("crypto_address").innerHTML = "BTC Address";
}
if(bx==2){
document.getElementById("crypto_address").innerHTML = "PM Account No.";
}
if(bx==4){
document.getElementById("crypto_address").innerHTML = "ETH Address";
}
if(bx==5){
document.getElementById("crypto_address").innerHTML = "XRP Address";
}
if(bx==6){
document.getElementById("crypto_address").innerHTML = "TRX Address";
}
//return bx;
}
function mySend() {
var x = document.getElementById("b1").value;
document.getElementById("c1").value = (x - (x/100)*2).toFixed(2);
}
function myRecieve() {
var y = document.getElementById("c1").value;
document.getElementById("b1").value = Math.round(+((y/100)*2) + +y).toFixed(2);
}
</script>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class=" input-group-addon"><i class="fa fa-folder"></i>
<span id="crypto_address">ETH Address</span> </span>
<input type="text" name="cryp_address" id="cryp_address" minlength="8" onkeyup="checkLen(this.value)" class="form-control" placeholder="Enter address to recievve coin" required>
</div>
</div>
<div id="counterDisplay" class="text-danger pull-right" style="font-size: 12px"></div>
<script type="text/javascript">
function checkLen(val){
if(val.length<9){
document.getElementById('counterDisplay').innerHTML = 'Invalid Entery!';
}
if(val.length>8){
document.getElementById('counterDisplay').innerHTML = ' ';
}
}
</script>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="exbutton" class="btn btn-primary" name="preview_order" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal"><i class="fa fa-refresh" id="resh" aria-hidden="true"></i> Preview Order</button>
</div>
</form>
</div>
</div>
</div>
When you click on preview it displays the next modal
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="prvwModalLabel">Preview Oder</h4>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
<h3><?php
if(($_SESSION['currency_receive'])==1){
echo $_SESSION['re_amt']." BTC";
}elseif(($_SESSION['currency_receive'])==2){
echo $_SESSION['re_amt']." PM";
}elseif(($_SESSION['currency_receive'])==4){
echo $_SESSION['re_amt']." ETH";
}elseif(($_SESSION['currency_receive'])==5){
echo $_SESSION['re_amt']." XRP";
}elseif(($_SESSION['currency_receive'])==6){
echo $_SESSION['re_amt']." TRX";
}else{
echo "Invalid Selection";
}
?>
</h3>
</div>
<?php echo $_SESSION['currency_receive'].'<br>'; ?>
<?php echo $_SESSION['currency_send']." Send<br>"; ?>
<?php// echo $_SESSION['re_amt']; ?>
<?php echo $_SESSION['se_amt']; ?>
<?php //echo $_SESSION['cryp_address']; ?>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Here is the PHP code I used is storing those data in sessions but if I try to carry out another transaction it still displaying the previously saved session data
<?php
//Swap Action
if(isset($_POST['preview_order'])){
$currency_send = $_POST['currency_send'];
$se_amt = $_POST['se_amt'];
$currency_receive = $_POST['currency_receive'];
$re_amt = $_POST['re_amt'];
$cryp_address = $_POST['cryp_address'];
if($currency_send != "" && $currency_receive !="" && $se_amt!="" && $re_amt!="" && $cryp_address!=""){
//condition is met open the preview modal
$_SESSION['currency_send'] = $currency_send;
$_SESSION['currency_receive'] = $currency_receive;
$_SESSION['se_amt'] = $se_amt;
$_SESSION['re_amt'] = $re_amt;
$_SESSION['cryp_address'] = $cryp_address;
//echo "<script>$('#thankyouModal').modal('show')</script>";
//Code Review
//Call ANOTHER MODAL TO PREVIEW ORDER BEFORE SUBMISSION
}
}
?>
I just want the input data on the first modal to dynamically display on the preview order modal box anytime the preview order button is clicked. thank you for your contribution.

My Forms in Modal are not resetting - JQuery

So, First i open Add Data Modal, and my form was empty.
Then i close it, and try to open Edit Data Modal.
Because this is a Edit Data, so my form filled with data from database.
But when i close the Edit Data and open Add Data again, my Add Data was filled with data from database, which is it's must be empty form.
Add Data and Edit data are using the same Modal, but different button.
So, There's my js.
$(document).ready(function() {
$('#datetimepicker1').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
},
format: 'DD-MM-YYYY HH:mm',
showTodayButton:true
});
$('#datetimepicker2').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
},
format: 'DD-MM-YYYY HH:mm',
showTodayButton:true
});
//Button Tambah
$('#btn_tambah').click(function(){
clearForm('#modal_add_new');
$('#frm').find('input:text, input:password, select, textarea').val('');
$('#frm').find("input[type='hidden']", $(this)).val('');
$('#frm').find('input:radio, input:checkbox').prop('checked', false);
$('#frm')[0].reset();
return false;
});
//DataTable
var myTable =
$('#promo-table')
.DataTable({
"bAutoWidth": false,
"aaSorting": [],
"bScrollCollapse": true,
"stateSave": true,
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(c1){
$(c1).css("text-align", "right");
},
render: $.fn.dataTable.render.number( ',', '.', 0 )
},
{ "bVisible": false, "aTargets": [ 8 ] }
],
"sAjaxSource": base_url+'admin/c_promo/get_json_data',
"bPaginate": true,
select: {
style: 'single'
}
});
myTable.on('order.dt search.dt', function () {
myTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
}).draw();
myTable.on('dblclick', 'tr', function (){
var data = myTable.row( this ).data();
//alert(data[3]);
var s = '1';
update(s,data[8]);
$('#modal_add_new').modal('show');
});
$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
new $.fn.dataTable.Buttons( myTable, {
buttons: [
{
"extend": "colvis",
"text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
"className": "btn btn-white btn-primary btn-bold",
columns: ':not(:first):not(:last)'
},
{
"extend": "copy",
"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "csv",
"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "excel",
"text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "pdf",
"text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "print",
"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
"className": "btn btn-white btn-primary btn-bold",
autoPrint: false,
message: 'This print was produced using the Print button for DataTables'
} ,
{
"text": "<i class='fa fa-refresh'></i> <span class='hidden'>Refreh</span>",
"className": "btn btn-white btn-primary btn-bold",
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
]
} );
myTable.buttons().container().appendTo( $('.tableTools-container') );
//style the message box
var defaultCopyAction = myTable.button(1).action();
myTable.button(1).action(function (e, dt, button, config) {
defaultCopyAction(e, dt, button, config);
$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
});
var defaultColvisAction = myTable.button(0).action();
myTable.button(0).action(function (e, dt, button, config) {
defaultColvisAction(e, dt, button, config);
if($('.dt-button-collection > .dropdown-menu').length == 0) {
$('.dt-button-collection')
.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
.find('a').attr('href', '#').wrap("<li />")
}
$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
});
});
function rem(frm,id){
bootbox.confirm("Anda yakin akan menghapus data ini?", function(result) {
if(result) {
window.location.href='c_promo/delete_data/'+frm+'/'+id;
}
});
}
function clearForm($form) {
$form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
$form.find(':checkbox, :radio').prop('checked', false);
}
$('#btn_save_promo').on('click',function(){
var id = $('#fld1').val();
var name = $('#fld2').val();
var type = $('#fld3').val();
var size = $('#fld4').val();
var kategori = $('#fld5').val();
var mulai = $('#fld6').val();
//var mulai = date.split("-").reverse().join("-");
var akhir = $('#fld7').val();
//var akhir = date1.split("-").reverse().join("-");
var quantity = $('#fld8').val();
//console.log(mulai);
// console.log(akhir);
if(name !="" && type !='' && size !='' && kategori !='' && mulai !='' && akhir !='' && quantity !=''){
$.ajax({
type : "POST",
url : base_url+'admin/c_promo/add_data',
dataType : "JSON",
data : {id:id, name:name, type:type, size:size, kategori:kategori, mulai:mulai,
akhir:akhir, quantity:quantity},
success: function(data){
//console.log(data);
if(data.status == 'terdaftar'){
alert('promo sudah ada..!!');
}
$('#modal_add_new').modal('hide');
$('#promo-table').DataTable().ajax.reload(null, false);
}
});
return false;
}else{
alert("Lengkapi Form (*)");
}
});
function update(frm,id){
$.ajax({
url: base_url+'admin/c_promo/cari_rec',
method: 'GET',
data: {
id: id,
frm: frm
},
success:function(result) {
$("input[name='fld1']").val(id);
//console.log(result);
var res = JSON.parse(result);
res.forEach(addFill);
}
});
}
function addFill(item, index){
if(item.fld.substring(0,3) == "img"){
$(item.fld).load(item.fld);
$(item.fld).attr('src',item.val);
} else if(item.fld.substring(0,5) == "table"){
$(item.fld).html(item.val);
} else if(item.fld.substring(0,4) == "span"){
$(item.fld).html(item.val);
} else if(item.fld.substring(0,1) != ""){
$(item.fld).val(item.val);
}
}
And then this is my HTML
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<li class="active">Dashboard</li>
</li>
</ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<h3 class="header smaller lighter blue"><?php echo $title;?></h3>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-toggle="tab" href="#home" aria-expanded="false">
<i class="green ace-icon fa fa-home bigger-120"></i>
Promo
</a>
</li>
<li class="">
<a data-toggle="tab" href="#bonus" aria-expanded="true">
Promo Bonus
<span class="badge badge-danger">4</span>
</a>
</li>
<li class="">
<a data-toggle="tab" href="#item" aria-expanded="true">
Promo Item
<span class="badge badge-danger">4</span>
</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade active in">
<div class="clearfix">
<button class="btn btn-white btn-info btn-bold" data-toggle="modal" data-target="#modal_add_new" id="btn_tambah">
<i class="ace-icon fa fa-pencil-square-o bigger-120 blue"></i>
Tambah
</button>
<div class="pull-right tableTools-container"></div>
</div>
<br>
<div class="table-header">
Results for "Promo"
</div>
<div>
<table id="promo-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center;">No</th>
<th>Nama Promo</th>
<th style="text-align:center;">Mulai</th>
<th style="text-align:center;">Sampai</th>
<th style="text-align:center;">Qty</th>
<th>Type</th>
<th>Kategori Produk</th>
<th style="text-align:center;">Aksi</th>
</tr>
</thead>
<tbody style="cursor: pointer;">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="bonus" class="tab-pane fade">
<table id="bonus-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center;">No</th>
<th>Nama Supplier</th>
<th style="text-align:center;">Aksi</th>
</tr>
</thead>
<tbody style="cursor: pointer;">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="item" class="tab-pane fade">
<table id="item-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center;">No</th>
<th>Nama Supplier</th>
<th style="text-align:center;">Aksi</th>
</tr>
</thead>
<tbody style="cursor: pointer;">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_add_new" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog" style="width:70%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 class="modal-title" id="myModalLabel">Master Promo</h3>
</br><?php //echo $this->session->userdata('user_id');?>
</div>
<?php //echo form_open_multipart('', 'class="form-horizontal" id="frm_promo"'); ?>
<form id="frm_promo" class="form-horizontal">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-xs-4" >Nama Promo</label>
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash()?>" />
<input type="hidden" name="fld1" id="fld1" class="form-control text-uppercase" value="">
<div class="col-xs-8">
<textarea name="fld2" id="fld2" class="form-control" type="text" placeholder="Nama Promo..." required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Type Diskon</label>
<div class="col-xs-8">
<select class="form-control" name="fld3" id="fld3" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$options1 = array(
"Persentase" => "Percentage",
"FreeItem" => "FreeItem",
"Nominal" => "Nominal"
);
foreach ($options1 as $diskon => $val){
?>
<option value="<?php echo $val;?>"> <?php echo $diskon;?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Ukuran Gambar</label>
<div class="col-xs-8">
<select class="form-control" name="fld4" id="fld4" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$options5 = array(
"Besar" => "Size366x500",
"Kecil" => "Size220x250"
);
foreach ($options5 as $ukuran => $val){
?>
<option value="<?php echo $val;?>"> <?php echo $ukuran;?> ( <?php echo $val;?> ) </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Kategori</label>
<div class="col-xs-8">
<select class="form-control" name="fld5" id="fld5" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$q = $this->db->query("SELECT id,name FROM productcategory ORDER BY name");
$r2 = $q->result_array();
foreach ($r2 as $row){
?>
<option value="<?php echo $row['id'];?>"><?php echo $row['name'];?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-xs-4" >Mulai Promo</label>
<div class="col-xs-8">
<div class='input-group date' id='datetimepicker1' style="width:160px;">
<input type='text' name="fld6" id="fld6" class="form-control" placeholder="Mulai Promo..." required/>
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Akhir Promo</label>
<div class="col-xs-8">
<div class='input-group date' id='datetimepicker2' style="width:160px;">
<input type='text' name="fld7" id="fld7" class="form-control" placeholder="Akhir Promo..." required/>
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Minimum Quantity</label>
<div class="col-xs-8">
<input name="fld8" id="fld8" style="width:40px;" class="form-control" type="text" placeholder="Qty..." required/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group" style="margin-left:10px;">
<button class="btn btn-info" id="btn_add">Add</button>
</div>
<table id="promo-produk" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center;">No</th>
<th>ID</th>
<th>Nama</th>
<th>Kategori</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td style="width:10px"></td>
<td></td>
<td></td>
<td></td>
<td style="width:20px"><a class="edit" href="">Edit</a></td>
<td style="width:20px"><a class="delete" href="">Delete</a></td>
</tr>
</tbody>
<!--<tbody style="cursor: pointer;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>-->
</table>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
<button class="btn btn-info" id="btn_save_promo">Simpan</button>
</div>
</div>
</div>
</div>
<!-- <div class="modal fade" id="modal_add_item" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog" style="width:70%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 class="modal-title" id="myModalLabel">Item Promo</h3>
</div>
<form id="frm_item" class="form-horizontal">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-xs-4" >Nama Promo</label>
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash()?>" />
<input type="hidden" name="fld1" class="form-control text-uppercase" value="">
<div class="col-xs-8">
<input name="fld2" id="fld2" class="form-control" type="text" placeholder="Nama Promo..." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Tipe Diskon</label>
<div class="col-xs-8">
<select class="form-control" name="fld3" id="fld3" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$options1 = array(
"Persentase" => "Percentage",
"FreeItem" => "FreeItem",
"Nominal" => "Nominal"
);
foreach ($options1 as $diskon => $val){
?>
<option value="<?php echo $val;?>"> <?php echo $diskon;?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Diskon</label>
<div class="col-xs-8">
<input name="fld3a" style="width:40px;" class="form-control" type="text" placeholder="Nilai..." required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Ukuran Gambar</label>
<div class="col-xs-8">
<select class="form-control" name="fld6" id="ukuran" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$options5 = array(
"Besar" => "Size366x500",
"Kecil" => "Size220x250"
);
foreach ($options5 as $ukuran => $val){
?>
<option value="<?php echo $val;?>"> <?php echo $ukuran;?> ( <?php echo $val;?> ) </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Kategori</label>
<div class="col-xs-8">
<select class="form-control" name="fld7" id="kategori" style="width:200px;" required/>
<option value="">Please Select</option>
<?php
$q = $this->db->query("SELECT id,name FROM productcategory ORDER BY name");
$r2 = $q->result_array();
foreach ($r2 as $row){
?>
<option value="<?php echo $row['id'];?>"><?php echo $row['name'];?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-xs-4" >Mulai Promo</label>
<div class="col-xs-8">
<div class='input-group date' id='datetimepicker1' style="width:160px;">
<input type='text' name="fld3" class="form-control" placeholder="Mulai Promo..." required/>
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Akhir Promo</label>
<div class="col-xs-8">
<div class='input-group date' id='datetimepicker2' style="width:160px;">
<input type='text' name="fld4" class="form-control" placeholder="Akhir Promo..." required/>
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" >Quantity</label>
<div class="col-xs-8">
<input name="fld5" style="width:40px;" class="form-control" type="text" placeholder="Qty..." required/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
<button class="btn btn-info" id="simpan">Simpan</button>
</div>
</div>
</div>
</div> -->

You need to empty the form when you open the modal again or you will always have the all data because when you open/close a modal the only thing you are doing is showing/hiding a div. You could create a function like this one to clear all the inputs of the form:
function clearForm($form) {
$form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
$form.find(':checkbox, :radio').prop('checked', false);
}
And call like:
myTable.on('dblclick', 'tr', function (){
clearForm('#modal_add_new');
var data = myTable.row( this ).data();
//alert(data[3]);
var s = '1';
update(s,data[8]);
$('#modal_add_new').modal('show');
});

Whitespaces getting applied to input box while retrieving the data

I am designing a application in PHP and using javascript to perform add/edit/delete .The data is getting inserted correctly but when i click on edit button the data dispalyed is in the centre if input box. i tried using CSS but nothing happened. I am also not able to type in either to correct the mistake.Below is code
PHP:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<?php include_once("header.php"); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" integrity="sha256-p6xU9YulB7E2Ic62/PX+h59ayb3PBJ0WFTEQxq0EjHw=" crossorigin="anonymous" />
</head>
<!-- END HEAD -->
<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white">
<div class="page-wrapper">
<?php include_once("navbar.php"); ?>
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix">
</div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<?php include_once("side_bar.php"); ?>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<button class="btn btn-success mt-sweetalert hide" data-title="Sweet Alerts with Icons" data-message="Success Icon" data-type="success" data-allow-outside-click="true" data-confirm-button-class="btn-success" id="msgbox" >Icon Success Alert</button>
<button class="btn btn-warning mt-sweetalert hide" data-title="Sweet Alerts with Icons" data-message="Warning Icon" data-type="warning" data-allow-outside-click="true" data-confirm-button-class="btn-warning" id="wmsg">Icon Warning Alert</button>
<a class="btn green btn-outline sbold" data-toggle="modal" href="#draggable"> + Add Assessment Type </a>
<div class="table-responsive">
<table id="users" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="display:none;">ID</th>
<th onclick="sortTable(1)">Assessment type code</th>
<th onclick="sortTable(2)">Assessment Name</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<th style="display:none;">ID</th>
<th>
<input type="text" class="form-control" id="codes" onkeyup="myFunction(this.id, 1)" placeholder="Search for codes.." title="Type in a name">
</th>
<th>
<input type="text" class="form-control" id="names" onkeyup="myFunction(this.id, 2)" placeholder="Search for names.." title="Type in a name">
</th>
<th colspan="2"></th>
</tr>
<?php
include_once PHP_PATH .'/config.php';
$sql = "select * from list_assessment_types";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()) {
$aid = $row["pk_assess_type_id"];
$code = $row["assess_type_code"];
$name = $row["assess_type_name"];
?>
<tr id="<?php echo $aid ?>">
<td style="display:none;"></td>
<td>
<?php echo $code ?>
</td>
<td>
<?php echo $name ?>
</td>
<td><a name="edit" class="btn blue btn-outline sbold" data-toggle="modal" href="#draggable1"><i class="fa fa-pencil-square-o fa-1x" aria-hidden="true"></i> Edit</a>
</td>
<td><button name="del" class="btn red btn-outline sbold"><i class="fa fa-trash fa-1x" aria-hidden="true"></i> Delete</button>
</td>
</tr>
<?php
}
db_close();
?>
</tbody>
</table>
</div>
<!-- Modal to add assessment type-->
<div class="modal fade draggable-modal" id="draggable" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add new Assessment Type</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="code">Assessment type code</label>
<input type="text" name="code" maxlength="15" id="code" value="" class="form-control" />
</div>
<div class="form-group">
<label for="name">Assessment name</label>
<input type="text" name="name" id="name" maxlength="20" value="" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button id="new_save" type="button" class="btn green" data-dismiss="modal">Save changes</button>
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal finishes here-->
<!-- Modal to edit assessment type-->
<div class="modal fade draggable-modal" id="draggable1" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Assessment Type</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="e_code">Assessment type code</label>
<input type="text" name="e_code" maxlength="15" id="e_code" value="" placeholder="test" class="form-control" />
</div>
<div class="form-group">
<label for="e_name">Assessment name</label>
<input type="text" name="e_name" id="e_name" maxlength="20" value="" placeholder="test" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button id="e_save" type="button" class="btn green" data-dismiss="modal">Save changes</button>
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal finishes here-->
</div>
<!-- END QUICK SIDEBAR -->
</div>
</div>
<!-- END CONTAINER -->
<?php include_once("footer_text.php"); ?>
</div>
<div class="quick-nav-overlay"></div>
<?php include_once("footer.php"); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?= ASSET_PATH ?>assets/staff_js/assessment_type.js"></script>
<script>
function myFunction(tab, s) {
var input, filter, table, tr, td, i;
input = document.getElementById(tab);
filter = input.value.toUpperCase();
table = document.getElementById("users");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[s];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
$("#draggable").draggable({
handle: ".modal-header"
});
</script>
</body>
</html>
JS
var x, okay_content, idx;
$(function () {
var parentId, tr;
$('#new_save').click(function () {
var code = $('#code').val();
var name = $('#name').val();
$.ajax({
url: 'class_codes.php',
type: 'post',
dataType: 'json',
data: {
from: 'insert',
code: code,
name: name
},
success: function (response) {
// Check if data is redundant.
if (response[0] === "REDUNDANT") {
alert("Data already exist.");
} else if (response[0] === "EMPTY") {
alert("Field can't be left empty");
} else if (response[0] == "1")
{
// Insert or Edit
$("#users tbody").append("<tr id=" + response[1] + "><td style='display:none;'><td>" + code + "</td>" + "<td>" + name + "</td>" + "<td><a name= 'edit' href='' class='btn blue btn-outline sbold'><i class='fa fa-pencil-square-o fa-1x' aria-hidden='true'></i> Edit</a></td><td><button name='del' class='btn red btn-outline sbold'><i class='fa fa-trash fa-1x' aria-hidden='true'></i> Delete</button></td></tr>");
//sortTable(1);
alert("Class Code created successfully.");
return false;
} else {
alert("Error: " + response[0]);
}
},
error: function (error) {
okay_content = error[0];
$("#okay").dialog("open");
}
});
});
$(document).on('click', 'a[name="edit"]', function () {
tr = $(this).parents('tr');
$('#e_code').val(tr.find("td:eq(1)").text());
$('#e_name').val(tr.find("td:eq(2)").text());
parentId = tr.attr('id');
});
$(document).on('click', '#e_save', function () {
var code = $('#e_code').val();
var name = $('#e_name').val();
alert("CODE: " + code + " NAME: " + name + " ID: " + parentId);
$.ajax({
url: 'assessment_type.php',
type: 'post',
dataType: 'json',
data: {
from: 'edit',
id: parentId,
code: code,
name: name
},
success: function (response) {
// Check if data is redundant.
if (response[0] === "REDUNDANT") {
alert("Data already exist.");
} else if (response[0] === "EMPTY") {
alert("Field can't be left empty");
// Check if field is empty
// okay_content = "Field can't be left empty ";
} else if (response[0] == "1")
{
// Insert or Edit
tr.remove();
$("#users tbody").append("<tr>" + "<td style='display:none;'>" + response[1] + "<td>" + code + "</td>" + "<td>" + name + "</td>" + "<td><a href='' class='btn blue btn-outline sbold'><i class='fa fa-pencil-square-o fa-1x' aria-hidden='true'></i> Edit</a></td>" + "<td><button name='del' class='btn red btn-outline sbold'><i class='fa fa-trash fa-1x' aria-hidden='true'></i> Delete</button></td></tr>");
//sortTable(1);
alert("Class Code edited successfully.");
return false;
} else {
alert("Error: " + response[0]);
}
},
error: function (error) {
okay_content = error[0];
$("#okay").dialog("open");
}
});
});
$(document).on('click', 'button[name="del"]', function () {
var row = $(this).parents('tr');
var id = row.attr('id');
$.ajax({
url: 'class_codes.php',
type: 'post',
dataType: 'json',
data: {
id: id,
from: 'delete'
},
success: function (suc) {
if (suc[0] == "1") {
alert("Class Code deleted successfully.");
$(this).addClass('btn-success ')
row.fadeOut(1000);
}
},
error: function (error) {
alert(error);
}
});
});
});
I am not sure where I am going wrong. Looks like the issue is within JS as I havbe tried turning entore CSS off but the issue still persists. Help please !!!

the php eho statement should be in 1 line

Added events wont "stick" to Full Calendar

So I've been trying to make a calendar for a church system where they can add reservations with the use of the calendar and I'm having a hard time making the data I add "stick" to the calendar itself.
Any help would be greatly appreciated.
<?php
include ('config1.php');
if(isset($_SESSION['username'])) {
$message = "Login First!";
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>San Isidro Labrador Parish </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.print.css" rel="stylesheet" media="print">
<script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>
Calender
<small>
Click to add/edit events
</small>
</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h2>Calender Events <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
<!-- footer content -->
<footer>
</footer>
<!-- /footer content -->
</div>
<!-- Start Calender modal -->
<div id="CalenderModalNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">New Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="Venue_idVenue" id ="Venue_idVenue" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Bulding" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament" id ="Sacrament_idSacrament" class = "form_control">
<option value="1" name ="Baptsim" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose" data-dismiss="modal">Close</button>
<input type="submit" name="submit" class="btn btn-primary antosubmit"value="Save changes" onClick="validinfo()"></input>
</div>
</div>
</div>
</div>
<div id="CalenderModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Edit Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<input type = "hidden" name = "submitted" value = "true"/>
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="idVenue2" id ="idVenue2" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Building" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament2" id ="Sacrament_idSacrament2" class = "form_control">
<option value="1" name ="Baptism" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date2" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time2" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose2" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary antosubmit2">Save changes</button>
</div>
</div>
</div>
</div>
<div id="fc_create" data-toggle="modal" data-target="#CalenderModalNew"></div>
<div id="fc_edit" data-toggle="modal" data-target="#CalenderModalEdit"></div>
<!-- End Calender modal -->
<!-- /page content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
</ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/nprogress.js"></script>
<!-- chart js -->
<script src="js/chartjs/chart.min.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script>
$(window).load(function () {
var date = new Date();
var d = date.getDate('Y-m-d');
var m = date.getMonth();
var y = date.getFullYear();
var started;
var categoryClass;
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?php echo date('Y-M-d'); ?>',
editable: true,
timeFormat: 'h:mmA',
selectable: true,
selectHelper: true,
eventLimit: true,
select: function (start, end, allDay) {
$('#fc_create').click();
started = start;
ended = end
$(".antosubmit").on("click", function () {
var venue = $("#title").val();
if (end) {
ended = end
}
categoryClass = $("#event_type").val();
if (venue) {
calendar.fullCalendar('renderEvent', {
title: title,
start: started,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
eventClick: function (calEvent, jsEvent, view) {
//alert(calEvent.title, jsEvent, view);
$('#fc_edit').click();
$('#title2').val(calEvent.venue);
categoryClass = $("#event_type").val();
$(".antosubmit2").on("click", function () {
calEvent.title = $("#title2").val();
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
events: [
<?php
include('config1.php');
$select = mysqli_query($conn, "select venue.venue_type, reservation.reservation_date, reservation.reservation_time from venue, reservation where venue.idVenue = reservation.idReservation;");
$number = mysqli_num_rows($select);
$row = mysqli_fetch_assoc($select);
$venue_type = $row['venue_type'];
$reservation_date = $row['reservation_date'];
$reservation_time = $row['reservation_time'];
$i = 1;
while($row = mysqli_fetch_array($select))
{
if($i <= $number) {
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
},
<?php
}
else
{
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
}
<?php
}
$i = $i + 1;
}
?>
<?php
if(!empty($_POST['submit']))
{
global $conn;
$reservation_date1 = $_POST["reservation_date"];
$reservation_time1 = $_POST["reservation_time"];
$Seminar_sched_idSeminar_sched1 = $_POST['Seminar_sched_idSeminar_sched'];
//$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
echo'<script language="java script">';
echo'alert("Data Saved!")';
echo'</script>';
if($insertRes)
{
printf("Error: %s\n", mysqli_error(conn));
exit();
}
}
mysqli_close($conn);
?>
]
});
});
</script>
</body>
</html>

Display JavaScript values [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to solve this on second picture, suppose to be the value of 3 on column USD and the others don't have value suppose to be zero.
<div class="span3">
<ul class="nav nav-tabs nav-stacked" >
<?php
foreach ( $submenu as $sm ) {
echo '<li>'.$sm['title'].'</li>';
}
?>
</ul>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Add New Daily Price Index</h3>
</div>
<div class="modal-body">
<form id="myForm" method="post">
<div class="span2">Index</div>
<input type="text" name="indexval" id="indexval"/>
<!--input type="hidden" value="hello" id="myField"-->
<!--button id="myFormSubmit" type="submit">Submit</button-->
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="myFormSubmit" >Save</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div class="span12">
<section id="global">
<legend><h4><?=$title?> <small>( Admin )</small></h4></legend>
<div class="row-fluid">
<div class="span2">Search By</div>
<input type="radio" id="r1" name="someRadioGroup" value="daily"/> Daily
<input type="radio" id="r2" name="someRadioGroup" value="monthly"/> Monthly
</div>
<div class="row-fluid">
<div id="output">
<div id="daily">
<div class="span2">Date: </div>
From
<input type="text" id="sdate" name="sdate" value="<?=$sdate?>" class="input-small"><span class="add-on"> to </span>
<input type="text" id="edate" name="edate" value="<?=$edate?>" class="input-small">
<hr>
<div class="row-fluid">
<div class="span2"></div>
<div class="span10">
<button id="btn_display_daily" class="btn btn-primary"><i class="icon-ok-circle"></i> Display</button>
<i class="icon-ok-circle"></i>Add New
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div id="month">
<div class="span2">Billing </div>
Month
<select name="month" class="span2" id="month">
<?php
$billing_start = $def_date_man_start;
$billing_start = date_parse($billing_start);
for($x=1;$x<=12;$x++){
$time_tmp = mktime (0, 0, 0, $x+1 , 0, 0);
$month = date('F',$time_tmp);
$sel = (($billing_start['month']) == $x) ? 'selected=selected' : '';
echo '<option value="'.$x.'" '.$sel.' >'.$month .'</option>';
}
?>
</select>
Year
<select name="year" class="span2" id="year">
<?php
for($x=2006;$x<=date('Y')+5;$x++){
$sel = ($billing_start['year'] == $x) ? 'selected=selected' : '';
echo '<option value="'.$x.'" '.$sel.' >'.$x.'</option>';
}
?>
</select>
<hr>
<div class="row-fluid">
<div class="span2"></div>
<div class="span10">
<button id="btn_display_records" class="btn btn-primary"><i class="icon-ok-circle"></i> Display</button>
<button id="btn_display_records" class="btn btn-primary"><i class="icon-ok-circle"></i> Add New</button>
</div>
</div>
</div>
</div>
<div id="indexresult"></div>
<div id="result"></div>
</div>
<!--div id="output2"></div-->
<script type="text/javascript">
$.extend({
loadDailyData : function () {
$('#result').html('');
$("#result").html('Getting Data.... ');
var daily = $('#r1').val();
$.post('../billing/daily_index_process',{sdate:$('#sdate').val(),edate:$('#edate').val(),'daily':daily},
function(data){
//console.log(data)
$('#result').html('');
var date = "<table class='table'><tr><td>Date</td>"
$.each(data.value, function (delivery_date, val1){
$.each(val1, function (x,v){
date += "<td>"+v.indexval+"</td>";
})
})
date +="<tr>"
$.each(data.value, function (delivery_date, val1){
var dd =delivery_date ;
date +="<td>"+dd+"</td>"
$.each(val1, function (x,v){
//date += "<td>"+v.priceval+"</td>";
date += "<td>"+v.priceval+"</td>";
})
date +="<tr>"
//console.log(delivery_date)
$('#result').html(date);
})
}
);
}
})
</script>
<script>
$(document).ready(function () {
$("#month").hide();
$("#daily").hide();
$('#sdate, #edate').datepicker();
$("input[name=someRadioGroup]:radio").change(function () {
if ($("#r1").attr("checked")) {
$('#result').html('');
$("#month").hide();
$("#daily").show();
}
else{
$('#result').html('');
$("#month").show();
$("#daily").hide();
}
})
});
</script>
<script>
function jsFunction(){
$( "#sdate, #edate" ).datepicker( "show" );
}
</script>
<script>
$(function(){
$('#myFormSubmit').click(function(e){
e.preventDefault();
var daily = $('#r1').val();
var indexval = $('#indexval').val();
var sdate = $('#sdate').val();
post_data = {'sdate':sdate,'indexval':indexval,'daily':daily};
$.post('<?=$base_url?>/billing/add_index_process',post_data,
function(data){
alert(data)
window.parent.location.reload();
}
)
});
});
</script>
<script>
$('#btn_display_daily').unbind('click').bind('click',function(e){
e.preventDefault();
$.loadDailyData();
});
</script>
pic 1
http://s1323.photobucket.com/user/Paul_Yuki/media/problem_zpse6067419.png.html?filters[user]=134917646&filters[recent]=1&sort=1&o=0
pic 2
http://s1323.photobucket.com/user/Paul_Yuki/media/problem2_zps747b33bd.png.html?filters[user]=134917646&filters[recent]=1&sort=1&o=1
Here's my query:
select type,indexval,delivery_date,priceval from price_indices
where delivery_date between '$sdate' and '$edate' and `type`='$type'
order by delivery_date

To use php value in javascript. Store php value in a variable and then echo in javascript. example:-
$value=3;//store value
$('#div').html('<?php echo $value ?>');//show php value

Categories

Resources