Develop Reference

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>

Bootstrap Codeigniter 3 Form Click on edit

<legend data-target="#basic_information" data-toggle="collapse">Basic Information</legend>
<fieldset id="basic_information" class="collapse">
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Screen Name</label>
<div class="col-sm-10">
<input type="text" name="screen_name" placeholder="Screen Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">First Name</label>
<div class="col-sm-10">
<input type="text" name="first_name" placeholder="First Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Middle Name</label>
<div class="col-sm-10">
<input type="text" name="middle_name" placeholder="Middle Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Last Name</label>
<div class="col-sm-10">
<input type="text" name="last_name" placeholder="Last Name" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Birthdate</label>
<div class="col-sm-2">
<select name="birthdate-month" id="birthdate-month">
<option value="">month</option>
<?php foreach($month as $month_number => $month_name) { ?>
<option value="<?php echo $month_number; ?>" <?php echo set_select('birthdate-month', $month_number); ?>><?php echo $month_name; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-2">
<select name="birthdate-day" id="birthdate-day">
<option value="">day</option>
<?php for($i=1; $i<=31; $i++){ ?>
<option value="<?php echo $i; ?>" <?php echo set_select('birthdate-day', $i); ?>><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-2">
<select name="birthdate-year" id="birthdate-year">
<option value="">year</option>
<?php for($i=(date("Y")-10); $i>=1930; $i--) { ?>
<option value="<?php echo $i; ?>" <?php echo set_select('birthdate-month', $i); ?>><?php echo $i; ?></option>
<?php } ?>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Gender</label>
<div class="col-sm-10">
<select name="gender" id="gender">
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Occupation</label>
<div class="col-sm-10">
<input type="text" name="job" placeholder="Occupation" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">Address</label>
<div class="col-sm-10">
<input type="text" name="address" placeholder="Address" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</fieldset>
I've added the collapse feature of Bootstrap on the above code. Whenever i click on the BASIC INFORMATION text, it would show the details, as it is hidden by default.
What i want to do is the same as the collapse feature.
I want the above code to be read only, i'm pretty sure i can do that with html.
What i want to do is to make it so that i only have to click on the input and it will be available for me to edit one by one or clicking a button and everything will be editable.
solely using bootstrap, like with what i did with collapse.
Is it possible? or do i need to use jquery.

You can do this using bootstrap and with jquery code like this :-
<script>
$(document).ready(function() {
$('#basic_information').on('hidden.bs.collapse', function () {
$('#basic_information .form-control').attr('readonly', true);/*It will add the readonly attribute in all input on collapse*/
});
$('#basic_information').on('shown.bs.collapse', function () {
$('#basic_information .form-control').attr('readonly', false);/*It will remove as soon as your basic information get expanded*/
});
});
</script>

Put a <span> adjacent to each form control with a common class like currentvalue, each one holding the text of the current value for that field. Add a single button at the top that uses JS/jQuery to toggle visibility between those spans, and the inputs (including the submit button). Then you have one file but its functionality is switchable. If you're using ajax to submit the form, then you'll also have to update the <span>s' contents on successful submit.

Display certain fields dependant on radio button select on page load

I am dragging data from a database and want to display different disabled form fields dependant on the selected radio button.
I have tried using onload="javascript:...." but it's not working.
HTML:
<fieldset>
<legend>Employment/Education Details</legend>
<div class="input-wrapper">
<label>Are you?<br>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" <?php if
($employment_status=="employed") echo "checked"; ?> disabled><label for="employed">Employed</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed" <?php if
($employment_status=="self_employed") echo "checked"; ?> disabled><label for="self_employed">Self Employed</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="student" id="student" <?php if
($employment_status=="student") echo "checked"; ?> disabled><label for="student">Student</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="other" id="other" <?php if
($employment_status=="other") echo "checked"; ?> disabled><label for="other">Other</label>
</label>
</div>
<div id="college_nus" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>College or NUS Number
<input type="text" name="college_nus" value="<?php echo $college_nus; ?>" disabled>
</label>
</div>
</div>
</div>
</div>
<div id="employment_details" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employer Name
<input type="text" name="employment_company" value="<?php echo $employment_company; ?>" disabld>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Job Title
<input type="text" name="employment_title" value="<?php echo $employment_title; ?>" disabled>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Address
<textarea name="employment_address" rows="4" value="<?php echo $employment_address; ?>" disabled></textarea>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>
Occupation
<input type="text" value="<?php echo $occupation; ?>" disabled>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Email
<input type="text" name="employment_email" value="<?php echo $employment_email; ?>" disabled>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Phone
<input type="text" name="employment_phone" value="<?php echo $employment_phone; ?>" disabled>
</label>
</div>
</div>
</div>
</div>
</fieldset>
Javascript:
function employmentCheck() {
if (document.getElementById('student').checked) {
document.getElementById('college_nus').style.display = 'block';
}
else document.getElementById('college_nus').style.display = 'none';
if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
document.getElementById('employment_details').style.display = 'block';
}
else document.getElementById('employment_details').style.display = 'none';
}
Can anyone help please?

I changed the function to window.onload and it worked fine. Here is a plunker.
https://plnkr.co/edit/Pz2rKRg9geglgKhdJM4H?p=preview
Here is the function
window.onload = function(){
if (document.getElementById('student').checked) {
console.log("student");
document.getElementById('college_nus').style.display = 'block';
}
else {
document.getElementById('college_nus').style.display = 'none';
}
if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
console.log("employed");
document.getElementById('employment_details').style.display = 'block';
}
else {
document.getElementById('employment_details').style.display = 'none';
}
}
I don't think there is an event of onload defined on the radio button object.
Thanks
Paras

How to display multiple form fields of the same type using jquery and fetch their values in php

I have a table named order_master which stores the order_id column. I also have another table order_details having the columns order_id (FK), vendor, purchase_date, delivery_date, and person_name which stores the details of the order corresponding to the order_id from the order_master table.
I want to display a form wherein a button add new item will be displayed. On clicking this button each time, a new block of fields (like vendor, purchase_date, delivery_date, person_name) will be displayed. The user can click the above button and enter as many items as he wants on the same order_id. And when he submits the form, the items on this form must be entered in the database.
How to achieve this?
actually i am using codeigniter framework (MVC architecture). Here i am attaching the view and js file.
<?php echo form_open(); ?>
<div id="emp"></div>
<div class="box">
<div>
</div>
<div class="col-lg-12" style="padding-top: 2%;margin-bottom: 3%" id="form-box">
<div class="col-lg-6 form-group">
<select name="item[]" id="item" class="form-control">
<option value="">--Select Item--</option>
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 form-group">
<select name="vendor[]" id="vendor" class="form-control">
<option value="">--Select Vendor--</option>
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor["id"]; ?>"><?php echo $vendor["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-4 form-group">
<input type="text" name="po_date[]" id="po_date" class="form-control date" placeholder="Purchase Date">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="quantity[]" id="quantity" class="form-control number" placeholder="Item Quantity Individual">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="unit_price[]" id="unit_price" class="form-control number" placeholder="Unit Price" style="text-align: left;">
</div>
<div class="col-lg-4 form-group">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<textarea name="description[]" id="description" class="form-control"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="height: 3px;background-color: grey"></div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group" id="messageBox">
</div>
</div>
</div>
<a id="add_item" class="col-lg-12" href="">Add new item</a>
<div class="col-lg-12 col-md-12 col-sm-12 text-center form-group">
<input type="button" value="Add Purchase Order" id="addpurchaseOrderBtn" class="btn btn-primary">
</div>
<?php echo form_close(); ?>
**JS File**
$("#main_content").css('minHeight', '400px');
$(document).ready(function() {
$('#add_item').click(function() {
var def_ht = $("#main_content").height() + 300;
$("#main_content").css('minHeight', def_ht);
$("#form-box").clone(true).appendTo("#form-box");
return false;
});
$("#addpurchaseOrderBtn").click(function() {
focusId = null;
var isvalid = false;
if(validateDropDown('item')){
isvalid = true;
}
if(validateDropDown('vendor')){
isvalid = true;
}
if(validatDate('po_date')){
isvalid = true;
}
if(validateTextbox('quantity')){
isvalid = true;
}
if(validateTextbox('unit_price')){
isvalid = true;
}
if(validateTextbox('description')){
isvalid = true;
}
if(isvalid){
focusId.focus();
$("#messageBox").html('<div class="alert alert-danger">There are some error in your submission. Please try again.</div>');
}else{
$("#addPurchaseFrm").submit();
}
});
});
This code works but i am unable to validate all the elements(items) in the form.

You can try the following structure-
<form name="addItem" method="post" action="addItem.php" class="insertItem">
<div class="itemAdd">
<input type="text" name="vendor" >
<input type="text" name="purchase_date" >
<input type="text" name="delivery_date" >
<input type="text" name="person_name" >
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-primary additem">
$("document").ready(function(){
$(".additem").click(function(){
$(".insertItem").append($(".itemAdd").html);
});
});
Then on addItem.php, you can execute the insert query to insert this data into your database

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.