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
Related
I am working on laravel project, I have a modal form and user can add new fields which I added dynamically using jquery and it works well, but the problem is when I send the form values to the controller the values of the newly dynamic fields is not send or like they lost when the modal is closed after submit, any help?
this is the modal code:
<div class="modal fade" id="{{$task->id}}" tabindex="-1" role="">
<div class="modal-dialog modal-login modal-lg" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title" id="exampleModalLabel">Edit Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-row">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="issue"
value="{{$task->issue}}">
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-6">
<select name="tag" id="tag" class="form-control" >
<option value="{{$task->tag}}" selected>{{$task->tag}}</option>
#if($task->tag=='CM')
<option value="PM">PM</option>
#else
<option value="CM">CM</option>
#endif
</select>
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-12">
<textarea class="form-control" name="root_cause"
placeholder="Root Cause"></textarea>
</div>
</div>
<div class="form-row pt-2">
<div class="col-md-8 form-group" id="container{{$task->id}}">
<select class="form-control" name="add_used_part[]" >
<option disabled selected>used spare parts</option>
#foreach($task->machine->part as $part)
<option value="{{$part->id}}"> {{$part->part_name}}
</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4" id="container2{{$task->id}}">
<input type="text" class="form-control " id="quantity"
name="quantity[]" placeholder="Quantity">
</div>
Add another spare part
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary"
onclick="submitajax('{{$task->id}}') ; return
false;">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
this jquery function:
<script type="text/javascript">
function addField(a,b){
var parts = JSON.parse(a);
// Container <div> where dynamic content will be placed
var container1 = document.getElementById("container"+b);
var container2 = document.getElementById("container2"+b);
//Create and append select list
var selectList = document.createElement("select");
selectList.name="add_used_part[]";
container1.append(selectList);
//Create and append the options
for (var i = 0; i < parts.length; i++) {
var option = document.createElement("option");
option.value = parts[i].id;
option.text = parts[i].part_name;
selectList.append(option);
}
var input = document.createElement("input");
input.type = "text";
input.name = "q";
container2.append(input);
}
function submitajax(id){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var tag = $("#tag").val();
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
/* this alert only one value of the add_used_part and quantity arrays
alert (id+tag+' '+add_used_part+' '+quantity);
$.ajax({
type:'POST',
url:"{{ route('task.update',['id' => $task->id ] ) }}",
data:{tag:tag, add_used_part:add_used_part, quantity:quantity},
success:function(data){
alert(data.success);
}
});
}
I think the problem is in this fragment:
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
You can't read many values this way, maybe you can try something like this:
var add_used_part= [];
$.each( $("[name='add_used_part[]']"), function(){
add_used_part.push( $(this).val() )
})
var quantity= [];
$.each( $("[name='quantity[]']"), function(){
quantity.push( $(this).val() )
})
And then send these arrays via AJAX request.
P.S: Sorry, I saw the question date just now :)
I'm having issues with trying to pass a value to a non-bootstrap modal. The way my current php loop is written, I understand that I can only use my modal to edit the last row in my SQL table. However when my modal div was inside the loop, I would only able to alter the first row of the SQL table. How could I modify my scripts to accept the value from the button which loads my modal?
PHP:
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
HTML:
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Javascript:
function edit_row(id){
initialize variables
send ajax data to modify_records.php
...
}
EDIT:Solution with hidden-field:
First give a class to your buttons in your loop
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button class="openModal" id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
Than put a hidden-field in your modal
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<input type="hidden" id="hidden_temp_id">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Than create in your js-file eventlistener to your buttons
var openModalButtons = document.getElementsByClassName("openModal");
for (var i = 0; i < openModalButtons.length; i++) {
openModalButtons[i].addEventListener('click', myFunction, false);
}
var myFunction = function() {
var idtemp = this.getAttribute("data-id");
document.getElementById('hidden_temp_id').value = idtemp;
};
In my form, I have made a dynamic text input field using jQuery and made it sortable using jQuery-UI. But the problem it, when I submit the form, only the last value of the form is sent to the action page.
How can I send all the values to the form action page and echo an Ordered List with the values?
Thanks in advance for your suggestions. Here is the snippet of the dynamic form:
$(document).ready(function() {
var fixHelperModified = function(e, div) {
var $originals = div.children();
var $helper = div.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function() {
$('div.index').each(function(i) {
$(this).html(i + 1);
});
};
$("#add").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
$("#addNew").click(function() {
$('#add').append("<div class='row rem' id='move'><div class='col-md-1 index'>1. </div><div class='col-md-9'><input type='text' class='form-control' name='members'></div><div class='col-md-1'><button class='delete btn btn-warning btn-xs'>Delete</button></div></div>");
updateIndex();
});
$("body").on('click', '#add .delete', function() {
$(this).closest(".rem").remove();
updateIndex();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form method="post" id="members" class="form-horizontal" action="pritnPreview.php">
<fieldset>
<div class="form-group">
<div class="col-sm-2">
<label class="form-name">Members</label>
</div>
<div class="col-sm-8">
<div class="row">
<div id='add'>
<div class='row rem' id='move'>
<div class='col-md-1 index'>1. </div>
<div class='col-md-9'>
<input type='text' class='form-control' name='members'>
</div>
<div class='col-md-1'>
<button class='delete btn btn-warning btn-xs'>Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-2">
<button id='addNew' type="button" href="#">Add another</button>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<input type="submit" name="submitSave" value="Submit">
</form>
The printPreview.php page:
<?php
if (!empty($_POST['cc'])) echo 'CC: ' . $cc;
?>
Change the name of the input to cc[] to save a array of values
name='cc[]'
I am trying to use some simple jQuery, I want to apply onto first dropdown,, I gave some values and when the dropdown values changes it changes the textboxes. but its not working, and below is my jQuery code. This form is in the model, but the jQuery I applied is in the footer of page.
$("#ddl").change(function() {
var end = this.value;
alert(end);
var f = $('#ddl').val();
if (f == 10) {
$("#cl").css("display", "none");
$("#cl1").css("display", "none");
}
if (f == 11) {
$("#cl").css("display", "block");
$("#cl1").css("display", "none");
}
if (f == 12) {
$("#cl1").css("display", "block");
$("#cl").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Starts Here -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Payment Details</h4>
</div>
<div class="modal-body">
<form method="POST">
<input type="hidden" name="std_id" value="<?php echo
$data['id']; ?>">
<div class="input-group">
<span class="input-group-addon">Payment Method</span>
<select name="method" class="form-control" id="ddl">
<option value="">select payment method</option>
<option value="10">Cash</option>
<option value="11">Check</option>
<option value="12">Online</option>
</select>
</div>
<br>
<div style="display: none;" id="cl">
<div class="input-group">
<span class="input-group-addon">Bank Name</span>
<input type="text" name="bank" placeholder="bank name" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Cheque Number</span>
<input type="text" name="amount" placeholder="cheque
number here" class="form-control">
</div>
<br>
</div>
<div style="display: none;" id="cl1">
<div class="input-group">
<span class="input-group-addon">Transaction
Number</span>
<input type="text" name="trans" placeholder="transaction number here" class="form-control">
</div>
<br>
</div>
<button class="btn btn-success" type="submit" name="pay">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Change if == 10 to if === '10'. Same for other if conditions. This is because the option value are in string
$("#ddl").change(function() {
var end = this.value;
alert(end);
var f = $('#ddl').val();
if (f === '10') {
console.log('10 selected')
$("#cl").css("display", "none");
$("#cl1").css("display", "none");
}
if (f === '11') {
$("#cl").css("display", "block");
$("#cl1").css("display", "none");
}
if (f === '12') {
$("#cl1").css("display", "block");
$("#cl").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Starts Here -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Payment Details</h4>
</div>
<div class="modal-body">
<form method="POST">
<input type="hidden" name="std_id" value="<?php echo
$data['id']; ?>">
<div class="input-group">
<span class="input-group-addon">Payment Method</span>
<select name="method" class="form-control" id="ddl">
<option value="">select payment method</option>
<option value="10">Cash</option>
<option value="11">Check</option>
<option value="12">Online</option>
</select>
</div>
<br>
<div style="display: none;" id="cl">
<div class="input-group">
<span class="input-group-addon">Bank Name</span>
<input type="text" name="bank" placeholder="bank name" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Cheque Number</span>
<input type="text" name="amount" placeholder="cheque
number here" class="form-control">
</div>
<br>
</div>
<div style="display: none;" id="cl1">
<div class="input-group">
<span class="input-group-addon">Transaction
Number</span>
<input type="text" name="trans" placeholder="transaction number here" class="form-control">
</div>
<br>
</div>
<button class="btn btn-success" type="submit" name="pay">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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">