I have a form like this. When I click on a class in the select drop down, fees are automatically populated for that particular class from mysql database.
<form id="forma" class="form-horizontal" method="POST" name="form1" action="<?php echo $editFormAction; ?>" novalidate="novalidate">
<div class="form-group">
<label for="text1" class="control-label col-lg-4">Full Name</label>
<div class="col-lg-8">
<input type="text" id="text1" name="name" placeholder="fullname in block letter" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-5">Admitted to Class:</label>
<div class="col-lg-6">
<select class="form-control" name="class_id" onclick="getFee(this.value)">
<?php do { ?>
<option value="<?php echo $row_dep['class_id']?>"
<?php if (!(strcmp($row_dep['class_name'], $row_dep['class_name']))) {
echo "selected=\"selected\"";
} ?>>
<?php echo $row_dep['class_name']?></option>
<?php } while ($row_dep = mysql_fetch_assoc($dep));
$rows = mysql_num_rows($dep);
if($rows > 0) {
mysql_data_seek($dep, 0);
$row_dep = mysql_fetch_assoc($dep);
} ?>
</select>
</div>
The following section is filled automatically with input boxes with their corresponding values from getfee.php when I select class.
<div class="form-group" id="sem">
</div>
<div class="form-group">
<label class="control-label col-lg-5" for="dp1">Date of Admission
</label>
<div class="col-lg-6">
<input type="text" name="date" class="form-control" value="<?php echo date('Y-m-d');?>" data-date-format="yyyy-mm-dd" id="dp2">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-5">Session <?php echo date('Y');?></label>
<div class="col-lg-6">
<select class="form-control chzn-select" name="year">
<option selected value="<?php echo date('Y');?>">Session <?php echo date('Y');?></option>
<option value="2010">Session-2010</option>
<option value="2011">Session-2011</option>
<option value="2012">Session-2012</option>
<option value="2013">Session-2013</option>
<option value="2014">Session-2015</option>
<option value="2015">Session-2015</option>
<option value="2016">Session-2016</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-5">Photo of Student</label>
<div class="col-lg-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" title="image" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Upload Photo</span> <span class="fileinput-exists">Change</span>
<input type="file" placeholder="Photo Upload" name="...">
</span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
</div>
<input type="hidden" name="MM_insert" value="form1">
<div class="form-group">
<div class="col-lg-4">
<input type="submit" class="btn btn-success btn-lg" value="submit">
</div>
</div>
</form>
The code works fine but when I hit submit button, the values of all input boxes from getfee.php disappear and become null. Here is my getfee.php.
<?php
require_once("configuration/config.php");
$class=intval($_GET['class']);
if (!$connection) {
die('Could not connect: ' . mysql_error());
}
$query="SELECT * FROM admission_fee WHERE class_id='$class'";
$result=mysql_query($query);
?>
<?php while($row=mysql_fetch_assoc($result)) { ?>
<div class="form-group">
<label class="control-label col-lg-5">Tuition Fee</label>
<div class="col-lg-6">
<input type="text" name="tuition" class="form-control" value="<?php echo $row['tution_fee']; ?>">
</div>
<label class="control-label col-lg-5">Admission Fee</label>
<div class="col-lg-6">
<input type="text" name="admission" class="form-control" value="<?php echo $row['admission']; ?>">
</div>
<label class="control-label col-lg-5">Annual Fee</label>
<div class="col-lg-6">
<input type="text" name="annual_fee" class="form-control" value="<?php echo $row['annual_fee']; ?>">
</div>
<label class="control-label col-lg-5">Development Fee</label>
<div class="col-lg-6">
<input type="text" name="development_fee" class="form-control" value="<?php echo $row['development_fee']; ?>">
</div>
<label class="control-label col-lg-5">Saraswati Puja Fee</label>
<div class="col-lg-6">
<input type="text" name="puja_fee" class="form-control" value="<?php echo $row['saraswati_puja_fee']; ?>">
</div>
<label class="control-label col-lg-5">Identity Card Fee</label>
<div class="col-lg-6">
<input type="text" name="id_fee" class="form-control" value="<?php echo $row['identity_card_fee']; ?>">
</div>
<label class="control-label col-lg-5">Computer Fee</label>
<div class="col-lg-6">
<input type="text" name="computer_fee" class="form-control" value="<?php echo $row['computer_fee']; ?>">
</div>
<label class="control-label col-lg-5">Forms & Prospectus Fee</label>
<div class="col-lg-6">
<input type="text" name="prospectus" class="form-control" value="<?php echo $row['forms_and_prospectus_fee']; ?>">
</div>
<label class="control-label col-lg-5">TC Charges</label>
<div class="col-lg-6">
<input type="text" name="tc_charge" class="form-control" value="<?php echo $row['TC_charges']; ?>">
</div>
<label class="control-label col-lg-5">Other Charges</label>
<div class="col-lg-6">
<input type="text" name="other_charges" class="form-control" value="<?php echo $row['other_charges']; ?>">
</div>
</div>
<?php } ?>
And Javascript.js file is below
<script>
function getVal() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getFee(class_id) {
var strURL="getFee.php?class="+class_id;
var req = getVal();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
//document.getElementById('sem').innerHTML=req.responseText;
req.responseText;
var form=document.getElementById("forma");
var d=document.createElement("div");
form.appendChild(d);
var div=document.getElementById("sem");
div.innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Please help me. I don't know how to go on beyond this.
Timing. Reinit your dom on each change. OR if you are using jQuery just place your js inbetween:
$(function(){ // your code });
This snippet applies on each dom change, events and pageload afterwhile jquery present.