I wrote a small script. I have a form in my page. It takes data from MySQL Database. After that, When user select some options from select panels, I need JS will do math summation and write total in a div/input field. I wrote the page and got errors. I changed a lot of things after searched similar problems on net and here.
I used parseInt($.. ,10) , document.getElementById("testID").innerHTML , document.getElementById("testID").value , document.getElementById("testID").val() and etc...
So, I'm asking your help to correct my errors. Thanks
Here is the Jsfiddle page link;
My Code (this is the latest version that I have) ;
JS:
<script type="text/javascript">
function updatesum() {
var T = 0;
var d = document;
var A = d.getElementById("araclar").val();
var M = d.getElementById("varis").val();
var K = d.getElementById("kisiler").val();
var B = d.getElementById("bavullar").val();
var C = d.getElementById("cocuklar").val();
var Ck = d.getElementById("cocukKoltuk").val();
T = parseInt('A' ,10) * parseInt('M' ,10);
document.getElementById("toplamm").innerHTML = T;
}
</script>
PHP:
<form action="subscribe.php" id="subscribe" method="post" name="subscribe">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>NAME<input class="form-control" name="name" placeholder="NAME" type="text"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>SURNAME<input class="form-control" name="surname" placeholder="SURNAME" type="text"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>TELEPHONE<input class="form-control" name="date" placeholder="TELEPHONE" type="tel"></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>EMAIL<input class="form-control" name="email" placeholder="EMAIL" type="email"></label>
</div>
<hr />
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>FROM:<select class="form-control" name="kalkis" id="kalkis" onchange="bolegler(this.value);sifirla();">
<option value="">Please Select</option>
<?php
$boleg= mysql_query("SELECT * FROM areas WHERE ust LIKE 0");
while($bolges = mysql_fetch_array($boleg)) {
echo '<option value="'.$bolges['id'].'">'.$bolges['isim'].'</option>';
}
?>
</select></label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" id="txtHint">
<!-- This Code will change after #kalkis change by JS start-->
<label>TO:<select name="varis" class="form-control">
<option value="">Please Select</option>
</select></label>
<!-- This Code will change after #kalkis change by JS end-->
</div>
<div id="datetimepicker" class="col-xs-12 col-sm-6 col-md-3 input-append date">
<label>REZERVATION DATE
<input type="text" class="col-xs-8 form-control" name="rezervasyon" style="float:left;"></input>
<span class="add-on col-xs-2" style="float: left; margin: -39px 0; font-size: 23px;"><i class="fa fa-calendar"></i>
</span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>CAR:
<select name="car" id="car" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$ara= mysql_query("SELECT * FROM cars");
while($arac = mysql_fetch_array($ara)) {
echo '<option value="'.$arac['price'].'" class="'.$arac['id'].'">'.$arac['isim'].'</option>';
}
?>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<label>PERSON QTY
<select name="persons" id="persons" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$kis= mysql_query("SELECT * FROM person");
while($person = mysql_fetch_array($kis)) {
echo '<option value="'.$person['price'].'" class="'.$person['qty'].'">'.$person['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>bag QTY
<select name="bags" id="bags" class="form-control" onchange="updatesum();">
<option value="0">Please Select</option>
<?php
$bav= mysql_query("SELECT * FROM bag");
while($bag = mysql_fetch_array($bav)) {
echo '<option value="'.$bag['price'].'" class="'.$bag['qty'].'">'.$bag['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<label>KID QTY
<select name="cocuklar" id="cocuklar" class="form-control" onchange="updatesum();cocukla();">
<option value="0">Please Select</option>
<?php
$coc= mysql_query("SELECT * FROM kidqty");
while($kid = mysql_fetch_array($coc)) {
echo '<option value="'.$kid['price'].'" class="'.$kid['qty'].'">'.$kid['qty'].'</option>';
}
?>
</select>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" id="koltukalani">
<label>KID CHAIR
<select name='kidchair' id='kidchair' class='form-control' onchange='updatesum();'>
<option value='0'>Please Select</option>
<option value='0'>Do no Want</option>
<option value='<?php echo $genel['kidchair']; ?>'>Need a Kid Chair</option>
</select>
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<button class="form-control submit-button" id="submit" type="submit">SUBMIT</button>
<br />
TOTAL AMOUNT:
<div id="toplamm" class="toplamm">0</div>
</div>
</div>
</form>
And the Other Codes:
function sifirla:
<script type="text/javascript">
function sifirla() {
document.getElementById("toplamm").innerHTML = "0";
}
</script>
function cocukla:
<script type="text/javascript">
function cocukla() {
var cocuk = parseInt(document.getElementById("cocuklar").value);
if (cocuk < "1") {
document.getElementById("kidchair").innerHTML = " ";
}
else {
document.getElementById("kidchair").innerHTML = "<label>KID CHAIR <select name='kidchair' id='kidchair' class='form-control' onchange='updatesum();'> <option value='0'>Please Select</option> <option value='0'>Do not Want</option> <option value='<?php echo $genel['kidchair']; ?>'>Need a Kid Chair</option> </select> </label>"; }
}
</script>
