Develop Reference

Javascript Multiple Div Toggle With a PHP Foreach

I have a foreach that loops through and javascript that toggles days of the week and then a checkbox that toggles the times to - from. Although, if there are two of these the toggle only works for the top one.
I am trying to figure out how to have each toggle separate on each div. I think I need to use parent but im not too sure. Also this is an edit, so I need to have the values displayed on each one if selected.
$('input[id="specificTime"]').on('switchChange.bootstrapSwitch', function(event, state) {
$("#specific_on").toggle();
console.log(state); // true | false
});
$('#MonChecked').click(function() {
$("#MonTimes").toggle(this.checked);
});
$('#TueChecked').click(function() {
$("#TueTimes").toggle(this.checked);
});
$('#WedChecked').click(function() {
$("#WedTimes").toggle(this.checked);
});
$('#ThuChecked').click(function() {
$("#ThuTimes").toggle(this.checked);
});
$('#FriChecked').click(function() {
$("#FriTimes").toggle(this.checked);
});
$('#SatChecked').click(function() {
$("#SatTimes").toggle(this.checked);
});
$('#SunChecked').click(function() {
$("#SunTimes").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="height:30px">
<div class="col-md-3 topPadding">
Specific Times
</div>
<div class="col-md-9" style="height:30px">
<!-- <input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" name="specificTime" data-size="small"> -->
<input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" id="specificTime" name="specificTime" data-size="small">
</div>
</div>
<hr>
<div id="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
<?php foreach ($week_days as $day) {
$sday = substr($day,0,3);
?>
<div class="row">
<div class="col-md-1">
<input type="checkbox" class="form-control input-sm" id="<?php echo $sday?>Checked" name="day[]" value="<?php echo $sday?>" data-size="small">
</div>
<div class="col-md-2 topPadding">
<?php echo ucfirst($day) ?>
</div>
<div id="<?php echo $sday?>Times" style="display:none;">
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_from" placeholder="From">
</div>
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_to" placeholder="To">
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div> <!-- End of specific_on -->

Displaying Div without clicking radio button in update form

I have a form that uses JavaScript for displaying a div depending on what radio button was chosen. Now in my other form for the update, i'd applied the same java script but made few changes on displaying directly the div without clicking the radio button but it didn't work. How to do it correctly. Any help is much appreciated.
<script type="text/javascript">
function payment() {
if (document.getElementById('installmentCheck').checked) {
document.getElementById('installment').style.display = "block";
document.getElementById('full').style.display = "none";
}else if (document.getElementById('fullCheck').checked) {
document.getElementById('full').style.display = "block";
document.getElementById('installment').style.display = "none";
}
}
</script>
<div class="col-lg-6 ">
<div class="form-group">
<label class="control-label">
Payment Scheme :
</label>
<div class="input-group ">
<?php
if ($scholarship->scholarship_payment != 'Full') {
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" checked > Installment &nbsp&nbsp&nbsp';
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full"> Full';
}else{
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" > Installment &nbsp&nbsp&nbsp';
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full" checked> Full';
}
?>
</div>
</div>
<div id="installment" style="display:none">
<div class="form-group">
<input type="text" name="Install" >
</div>
</div>
<div id="full" style="display:none">
<div class="form-group">
<input type="text" name="full" >
</div>
</div>
</div>

If I understood you correctly, you could remove the display:none CSS from the bottom <div>s conditionally:
<div id="installment" <?php if($scholarship->scholarship_payment == 'Full'){ echo 'style="display:none"' } ?>>
<div class="form-group">
<input type="text" name="Install" >
</div>
</div>
<div id="full" <?php if($scholarship->scholarship_payment != 'Full'){ echo 'style="display:none"' } ?>>
<div class="form-group">
<input type="text" name="full" >
</div>
</div>
Or, alternatively, switch id and name in one box:
<div id="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'installment' } else { echo "full" } ?>">
<div class="form-group">
<input type="text" name="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'Install' } else { echo "full" } ?>" >
</div>
</div>

how can i validate the checkbox?

<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
<div class="form-group row" style="margin-top:10px;height:50px;">
<div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
<label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
<span>Hepatitis A vaccine</span></label>
</div>
<div class="form-group col-md-4">
<!-- Date input -->
<input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
</div>
</div>
<div class="row" style="padding:15px;">
<div class="col-md-3 col-md-offset-1">
<div class="form-group">
<h3 style="color:orange;">Clinic Name</h3><br>
<input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
<label for="clinic_name"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<h3 style="color:orange;">Name of the Health practitioner</h3><br>
<input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
<label for="hp_name"></label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h3 style="color:orange;">Lot no. of Vaccine</h3><br>
<input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
<label for="lotno"></label>
</div>
</div>
<div class="row col-md-offset-1">
<div class="col-md-6 text-right">
<input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
</div>
</div>
</div>
</form>
i have added my html code also..
$('.save').on('click', function() {
var chk = $(this).parent().parent().parent().parent().parent().find('input [name="ch"]').attr('class');
if ($("." + chk).attr('checked', false)) {
alert("please check the checkbox");
} else {
alert("you have checked the checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
i have tried with this code and getting the alert "please check the checkbox" for both conditions if and else.
i just want to validate the checkbox whether it is checked or not .. if checked means it should display the relevant message if not checked also should display the message.

There are two things i am noticing:
Instead use .closest() against .parent() multiple times.
Do not set the attribute in the if condition, instead of .attr() use .prop().
You can change to this
var chk = $(this).closest('form').find('input[name="ch"]');// use form if you have one.
if (!$(chk).prop('checked')) {
$('.save').on('click', function() {
var chk = $(this).closest('form').find('input[name="ch"]');
if (!$(chk).prop('checked')) {
alert("please check the checkbox");
} else {
alert("you have checked the checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
<div class="form-group row" style="margin-top:10px;height:50px;">
<div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
<label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
<span>Hepatitis A vaccine</span></label>
</div>
<div class="form-group col-md-4">
<!-- Date input -->
<input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
</div>
</div>
<div class="row" style="padding:15px;">
<div class="col-md-3 col-md-offset-1">
<div class="form-group">
<h3 style="color:orange;">Clinic Name</h3><br>
<input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
<label for="clinic_name"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<h3 style="color:orange;">Name of the Health practitioner</h3><br>
<input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
<label for="hp_name"></label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h3 style="color:orange;">Lot no. of Vaccine</h3><br>
<input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
<label for="lotno"></label>
</div>
</div>
<div class="row col-md-offset-1">
<div class="col-md-6 text-right">
<input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
</div>
</div>
</div>
</form>

error after reload div using jquery load

I have a div with id content
here is my script
<script>
$(document).ready(function(){
$("#avt").fileinput();
$('#updateuser').on('submit', function (e) {
e.preventDefault();
if($('#pwd').val() == $('#repwd').val()){
var formData = new FormData($(this)[0]);
$.ajax({
type: 'post',
url: 'user/edit',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
$("#content").load(location.href + " #content");
}
});
}else{
$('#errordisplay').html(' <div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4><i class="icon fa fa-ban"></i> Alert!</h4> Nhập lại password không đúng!Xin nhập lại!</div>');
}
});
});
</script>
enter image description here
at the first click update,data updated but I look like the javascript not working anymore and css error.
here is image when page normal
enter image description here
here is content div
<div class="body-content outer-top-xs" id="content">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="box wow fadeInUp outer-bottom-xs animated" style="visibility: visible; animation-name: fadeInUp;">
<h3 class="section-title">Thông Tin Người Dùng</h3>
<div class="box-body outer-top-xs">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="<?= upload_url() ?>/avt/<?= $info['avatar'] ?>" class="img-responsive img-circle" ></div>
</div>
<div class="row">
<hr>
<span class="text-bold">Họ và Tên : </span><span class="text-muted"><?= $info['fullname'] ?> ( <?= $info['username'] ?>)</span>
<hr>
<span class="text-bold">Ngày Đăng Kí : </span><span class="text-muted"><?= $info['date_register'] ?></span>
<hr>
</div>
</div>
<!-- /.sidebar-widget-body -->
</div></div>
<div class="col-md-7">
<div class="box wow fadeInUp outer-bottom-xs animated" style="visibility: visible; animation-name: fadeInUp;">
<h3 class="section-title">Cập Nhật Thông Tin</h3>
<div class="box-body outer-top-xs">
<form class="form-horizontal" id="updateuser">
<div class="box-body">
<div class="form-group">
<label for="avt" class="col-sm-2 control-label">Avatar</label>
<div class="col-sm-10">
<input name="img" class="file" type="file" >
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input class="form-control" id="username" name="username" placeholder="Username" type="text" readonly="readonly" value="<?= $info['username'] ?>">
<input id="uid" name="uid" type="hidden" readonly="readonly" value="<?= $info['userid'] ?>">
</div>
<label for="fullname" class="col-sm-2 control-label">Họ Tên </label>
<div class="col-sm-4">
<input class="form-control" id="fullname" name="fullname" placeholder="Fullname" type="text" value="<?= $info['fullname'] ?>">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">New Pwd</label>
<div class="col-sm-4">
<input class="form-control" id="pwd" name="pwd" placeholder="Password" type="password" >
</div>
<label for="repwd" class="col-sm-2 control-label">Reinput</label>
<div class="col-sm-4">
<input class="form-control" id="repwd" name="repwd" placeholder=" Retype Password" type="password">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email *</label>
<div class="col-sm-4">
<input class="form-control" required id="email" name="email" placeholder="Email" type="email" value="<?= $info['email'] ?>">
</div>
<label for="addr" class="col-sm-2 control-label">Địa Chỉ</label>
<div class="col-sm-4">
<input class="form-control" id="addr" name="addr" placeholder="Địa Chỉ" type="text" value="<?= $info['address'] ?>">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Giới Tính</label>
<div class="col-sm-10">
<label class="col-sm-3 radio-inline"><input type="radio" name="gender" value="0" <?php if($info['gender'] ==0) echo 'checked' ?> >Nam</label>
<label class="col-sm-3 radio-inline"><input type="radio" name="gender" value="1" <?php if($info['gender'] ==1) echo 'checked' ?>>Nữ</label>
<label class="col-sm-3 radio-inline"><input type="radio" name="gender" value="2" <?php if($info['gender'] ==2) echo 'checked' ?>>Khác</label>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">SĐT</label>
<div class="col-sm-4">
<input class="form-control" id="phone" name="phone" placeholder="Số Điện Thoại" type="text" value="<?= $info['phone'] ?>">
</div>
<label for="group" class="col-sm-2 control-label">Group</label>
<div class="col-sm-4">
<select class="form-control" id="group" name="group">
<?php foreach($listgroup as $item): ?>
<option value="<?= $item['groupid'] ?>" <?php if($info['groupid'] ==$item['groupid']) echo 'selected' ?>><?= $item['name'] ?></option>
<?php endforeach ?>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn bg-tit pull-right">Update</button>
</div>
<!-- /.box-footer -->
</form>
</div>
<!-- /.sidebar-widget-body -->
</div></div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>

$("#content").load(location.href + " #content");
should be
$("#content").load(location.href + " #content > *");

Script on AJAX Post response isn't executing just giving erroe unexpected token {

I am trying to generate morris js chart in bootstrap dynamically using AJAX. But I couldn't figure out the issue and why I couldn't do it. Console.log saya "Uncaught SyntaxError: Unexpected token {".
Here is the html code and the javascript where user will click on a button to load ajax content.
$( "#report_form" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
alert('test');
if($('#cb').is(':checked')){
cb=true;
}else{
cb=false;
}
if($('#cheque').is(':checked')){
cheque=true;
}else{
cheque=false;
}
if($('#tr').is(':checked')){
tr=true;
}else{
tr=false;
}
if($('#especes').is(':checked')){
especes=true;
}else{
especes=false;
}
var start_d=document.getElementById("start_date").value;
var end_d=document.getElementById("end_date").value;
$.post( "reporting/generate_graph", {
cb: cb,
cheque: cheque,
tr: tr,
especes: especes,
start_date: start_d,
end_date: end_d
})
.done(function(chart) {
$( "#chart" ).html(chart);
console.log(chart);
// $.globalEval( "draw_graph();" );
// eval(chart);
});
});
<form id="report_form" action="<?php echo base_url(); ?>reporting/generate_graph" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="" class="col-sm-3 control-label">Time Period- from:</label>
<div class="col-sm-3">
<input name="date_start" id="start_date" type="date" name="" id="input" class="form-control" value="" required="required" title="" >
</div>
<label for="" class="col-sm-3 control-label">To:</label>
<div class="col-sm-3">
<input name="date_end" id="end_date" type="date" name="" id="input" class="form-control" value="<?php echo date('Y-m-d'); ?>" required="required" title="">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">CB:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cb" type="checkbox" value="cb" id="cb">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">Cheque:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="cheque" type="checkbox" value="cheque" id="cheque">
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-3 control-label">TR:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="tr" type="checkbox" value="tr" id="tr">
</label>
</div>
</div>
<label for="" class="col-sm-3 control-label">ESPECES:</label>
<div class="col-sm-3">
<div class="checkbox">
<label>
<input name="especes" type="checkbox" value="especes" id="especes">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-warning" >Genarate</button>
</div>
</div>
</form>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
<center>
<!-- The Div for Charts -->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="chart">
</div>
</center>
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
</div>
And here is the html response that the above page will have
<html>
<head></head>
<body >
<div id="chart_div"></div>
<script type="text/javascript">
//function draw_graph() {
alert('graph');
Morris.Bar({
element: 'chart_div',
data: [
<?php foreach ($graph_data as $bars) { ?>
{y:
<?php echo $bars['date']; ?> ,
<?php if($cb==true) { ?>
a: <?php echo $bars['cb']; ?>,
<?php } ?>
<?php if($cheque==true) { ?>
b: <?php echo $bars['cheque']; ?>,
<?php } ?>
<?php if($tr==true) { ?>
c: <?php echo $bars['tr']; ?>,
<?php } ?>
<?php if($especes==true) { ?>
d: <?php echo $bars['especes']; ?>,
<?php } ?>
}
<?php
}
?>
],
xkey: 'y',
ykeys: ['a', 'b','c','d'],
labels: ['CB', 'Cheque','TR','ESPECES'],
resize:true
});
//}
</script>
</body>
</html>
But Nothing happens. I want to generate the above graph. $graph_data is an array of a record set and it is fine. I have var_dump it and it gives a result array without any issue.