Develop Reference

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

calcluation of average and show different results in two text boxes

while calculating the average i have to show different results in two different text boxes..But the results come same in only one text box...how to display the average in two different text box..here is my code
function calcAvg() {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName("select");
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
document.getElementById("bpover").value = avg;
}
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover" readonly>
<hr>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover" readonly>

while calculating the average i have to show different results in two
different text boxes..But the results come same in only one text box
it's not working because you have two id attributes which have the same value. That is NOT valid HTML. In this case, it would be better to use class attribute as that would allow you to target multiple elements.
change id to class attributes.
step 1 - change the first input element:
<input type="text" name="Average" id="bpover" readonly>
to this:
<input type="text" name="Average" class="bpover" readonly>
step 2 - change the second input element:
<input type="text" name="Average" id="bpover" readonly>
to this:
<input type="text" name="Average" class="bpover" readonly>
then within your javascript:
change this:
document.getElementById("bpover").value = avg;
to this:
var array = document.getElementsByClassName("bpover");
array[0].value = avg;
array[1].value = avg;
further reading:
Why is it a bad thing to have multiple HTML elements with the same id
attribute?
Document.getElementsByClassName()

On your javascript function, you have to be able to specify where the input is coming from and where it's going.
function calcAvg(input_id, output_id) {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName(input_id);
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
document.getElementById(output_id).value = avg;
}
Great! Now we have to differentiate the inputs and the outputs just a little bit by grouping their class names.
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1', 'bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover1" readonly>
Notice that in the calcAvg() function, we now pass in the class names of both the input and the output so we know where to write to once the average is calculated.
We apply this same logic to the second row, something like
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover2" readonly>
Try these changes and see how that works for you.
Here is what I did in codepen.io: http://codepen.io/anon/pen/vxMLjK?editors=1010
APPENDIX:
IDs in HTML are supposed to be unique, you cannot have more than one element share the same ID. Class names on the other hand are shareable. I'm sure there are other ways to go about grouping the Select element together, I just can't think of anything of the top of my head at the moment.

Problem: Both input have same ID.
Solution: try this code
simply passed id value to identify which input you are trying to point here.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script type="text/javascript">
function calcAvg(Input_choice) {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName("select");
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
if(Input_choice == 1){
document.getElementById("bpover1").value = avg;
}
else {
document.getElementById("bpover2").value = avg;
}
}
</script>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover1" readonly>
<hr>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover2" readonly>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

You are missing the point with ID. ID's are unique. One page can have only one element with ID "bpover".

You can not use same "name" or same "id" for multiple input
element's though, It might not show any errors on the client side but
it's a serious mistake.

jquery chosen plugin with dynamic table

I'm using the jQuery plugin chosen. I have that working as I want. My issue is using it with a dynamic table. The initial row works but when a new row is added to the table the newly added chosen doesn't work. I did find a question on here about using .on but am completely lost as to how to go about this.
jQuery Code for chosen plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
JS code for adding rows to table
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
</script>

hey, I know i'm little late but you need to destroy your chosen and
then append and recontruct it like this:
$(function() {
$(".chzn-select").chosen();
});
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append
$(".chzn-select").chosen("destroy")
var clone = $('#newId').get(0).outerHTML;
var tblRow = '<tr><td> <input type="text"></td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td>'+$("#selectJob").html()+'</td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td >'+clone+'</td>';
tblRow += '<td </td> <td </td> ';
tblRow+='</tr>';
$("#myTable").append(tblRow);
$('.chzn-select').chosen()
}
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet" type="text/css">
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value=" " readonly>
</td>
<td>
<input type="text" name="UnitID[]" value=" " readonly>
</td>
<td>
<div id="selectJob">
<select id="JobCode" name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</div>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" id="newId" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>

Calculating the cost for post and packaging its always out by a few pennies [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so this is my code.... basically I'm having the problem with the final sum... if you buy 1 gift one pixboard and select United Kingdom it should come to £18.48 but instead it comes to £17.50? I have looked through this, a more knowladagble person has looked through this briefly and couldn't find anything wrong so I'm hoping one of you geniuses on her would be able to help me solve this problem I'm having... much appreciated!
<!DOCTYPE html>
<!-- HTML Select Junior Example 0.4 -->
<!-- Please note the code on these pages are provided by WorldPay as working examples only. -->
<!-- Any changes you make to the copies of these pages will not be supported by WorldPay. -->
<!-- For further information on reading html see the supplied help section. -->
<html>
<!-- The name, style, and properties of the page are defined in the 'head' tags -->
<head>
<title>Pixboard Postage Price</title>
<meta http-equiv="Content-Type" content="text/html">
<meta name="description" content="Junior HTML Example 0.4">
<meta name="keywords" content="Junior, html">
<style type="text/css"> td {text-align:"left"; vertical-align:"middle"; font-family:"arial"; color:"black"} h1,h2,h3,h4,h5,h6,h7 {text-align:"center"; vertical-align:"middle"; font-family:"arial"; color:"black"}</style>
</head>
<!-- The content to be used on the page is placed between the 'body' tags. -->
<body>
<!-- This is a purchase token, for more information on the elements with in a purchase token see the supplied help section. -->
<!-- PLEASE NOTE: this is a test installation and values will require changing to reflect merchants requirements -->
<form action="https://secure-test.worldpay.com/wcc/purchase" method="post" name="BuyForm">
<input type="hidden" name="instId" value="211616"><!-- The "instId" value "0000000" should be replaced with the Merchant's own installation Id -->
<input type="hidden" name="cartId" value="abc123"><!-- This is a unique identifier for merchants use. Example: PRODUCT123 -->
<input type="hidden" name="currency" value="GBP"><!-- Choose appropriate currency that you would like to use -->
<input type="hidden" name="desc" value="">
<input type="hidden" name="testMode" value="100">
<!-- JavaScript is used to give functionality to some of the pages elements -->
<script language="JavaScript">
// The next two functions round numbers to numerical formatting. They do not need to be altered when adding or removing products.
function roundOff(value, precision)
{
return places(value,1,precision);
}
function places(X, M, N)
{
var T, S=new String(Math.round(X*Number("1e"+N)))
while (S.length<M+N) S='0'+S
var y = S.substr(0, T=(S.length-N));
if(N>0)
{
y += '.' + S.substr(T, N);
}
return y;
}
// This function checks for empty quantities. It does not need to be altered when adding or removing products.
function CheckNull(value)
{
if (value == "")
{
value = "0";
}
return value;
}
// This function defines the postage and packaging location. It does not need to be altered when adding or removing products.
function typeOfCarriage(x,whereabouts)
{
console.log(whereabouts);
x.carriage_amount.value = whereabouts;
}
// This function addeds the postage and packaging to the total price of the products. Add new postage rates here, and also edit further down the page to add them to the table.
function calculate(x)
{
basicprice = calc(x);
if(Number(basicprice) > 0)
{
console.log(basicprice);
switch (x.carriage_amount.value)
{
case "UK" :
postage_and_packaging = 3.50;
break
case "US" :
postage_and_packaging = 5.75;
break
// To add a new postage rate. Copy from here...
case "asia" :
postage_and_packaging = 5.75;
break
// ...to here, and paste directly below. Change the case country, and the postage price. You will also need to add the postage option you have created further down the page.
default :
postage_and_packaging = 8.75;
break;
}
x.amount.value = parseInt(basicprice) + Number(postage_and_packaging);
}
else
{
x.amount.value = "0";
}
x.amount.value = roundOff(x.amount.value,2);
}
// The standard price, exluding postage and packaging is calculated here. It does not need to be altered when adding or removing products. -->
function calc(x)
{
x.amount.value = 0;
var y = x.price.length;
var z = x.qty.length;
var a = Number(x.amount.value);
var b,c;
while(y > 0)
{
b = Number(CheckNull(x.price[y-1].value));
c = Number(CheckNull(x.qty[y-1].value));
a += (b * c);
y--;
}
return a;
}
</script>
<h1>Postage &amp Packaging</h1>
<!-- This table provides layout for the products listed. -->
<table cellPadding="3" border="2" align="center">
<tr>
<td colSpan="3"><b>Gift</b><input name="price" type="hidden" value="3.99"> - £3.99</td>
</tr>
<tr>
<td>Quantity: <input name="qty" size="3" value="0"></td>
</tr>
<tr>
<td colSpan="3"><b>195 x 295 Pixboard</b><input name="price" type="hidden" value="10.99"> - £10.99</td>
</tr>
<tr>
<td>Quantity: <input name="qty" size="3" value="1"></td>
</tr>
</table>
<br><br>
<!-- This table is used as the total calculator and postage and packaging selector. -->
<input name="carriage_amount" type="hidden" value="uk">
<table cellPadding="3" border=2 align="center">
<tr>
<td>
<select name=postage_and_packaging onchange="typeOfCarriage(this.form,this.value);calculate(this.form)">
<OPTION SELECTED VALUE="">Please select country</option>
<OPTION value='AF'>Afghanistan</option>
<OPTION value='AL'>Albania</option>
<OPTION value='DZ'>Algeria</option>
<OPTION value='AS'>American Samoa</option>
<OPTION value='AD'>Andorra</option>
<OPTION value='AO'>Angola</option>
<OPTION value='AI'>Anguilla</option>
<OPTION value='AQ'>Antarctica</option>
<OPTION value='AG'>Antigua and Barbuda</option>
<OPTION value='AR'>Argentina</option>
<OPTION value='AM'>Armenia</option>
<OPTION value='AW'>Aruba</option>
<OPTION value='AU'>Australia</option>
<OPTION value='AT'>Austria</option>
<OPTION value='AZ'>Azerbaijan</option>
<OPTION value='BS'>Bahamas</option>
<OPTION value='BH'>Bahrain</option>
<OPTION value='BD'>Bangladesh</option>
<OPTION value='BB'>Barbados</option>
<OPTION value='BY'>Belarus</option>
<OPTION value='BE'>Belgium</option>
<OPTION value='BZ'>Belize</option>
<OPTION value='BJ'>Benin</option>
<OPTION value='BM'>Bermuda</option>
<OPTION value='BT'>Bhutan</option>
<OPTION value='BO'>Bolivia</option>
<OPTION value='BA'>Bosnia and Herzegovina</option>
<OPTION value='BW'>Botswana</option>
<OPTION value='BV'>Bouvet Island</option>
<OPTION value='br'>brazil</option>
<OPTION value='IO'>british Indian Ocean Territory</option>
<OPTION value='BN'>brunei Darussalam</option>
<OPTION value='BG'>Bulgaria</option>
<OPTION value='BF'>Burkina Faso</option>
<OPTION value='BI'>Burundi</option>
<OPTION value='KH'>Cambodia</option>
<OPTION value='CM'>Cameroon</option>
<OPTION value='CA'>Canada</option>
<OPTION value='CV'>Cape Verde</option>
<OPTION value='KY'>Cayman Islands</option>
<OPTION value='CF'>Central African Republic</option>
<OPTION value='td'>Chad</option>
<OPTION value='CL'>Chile</option>
<OPTION value='CN'>China</option>
<OPTION value='CX'>Christmas Island</option>
<OPTION value='CC'>Cocos (Keeling) Islands</option>
<OPTION value='CO'>Colombia</option>
<OPTION value='KM'>Comoros</option>
<OPTION value='CG'>Congo</option>
<OPTION value='CK'>Cook Islands</option>
<OPTION value='CR'>Costa Rica</option>
<OPTION value='HR'>Croatia</option>
<OPTION value='CU'>Cuba</option>
<OPTION value='CY'>Cyprus</option>
<OPTION value='CZ'>Czech Republic</option>
<OPTION value='CI'>Côte d'Ivoire</option>
<OPTION value='DK'>Denmark</option>
<OPTION value='DJ'>Djibouti</option>
<OPTION value='DM'>Dominica</option>
<OPTION value='DO'>Dominican Republic</option>
<OPTION value='TP'>East Timor</option>
<OPTION value='EC'>Ecuador</option>
<OPTION value='EG'>Egypt</option>
<OPTION value='SV'>El salvador</option>
<OPTION value='GQ'>Equatorial Guinea</option>
<OPTION value='ER'>Eritrea</option>
<OPTION value='EE'>Estonia</option>
<OPTION value='ET'>Ethiopia</option>
<OPTION value='FK'>Falkland Islands</option>
<OPTION value='FO'>Faroe Islands</option>
<OPTION value='FJ'>Fiji</option>
<OPTION value='FI'>Finland</option>
<OPTION value='FR'>France</option>
<OPTION value='GF'>French Guiana</option>
<OPTION value='PF'>French Polynesia</option>
<OPTION value='TF'>French Southern Territories</option>
<OPTION value='GA'>Gabon</option>
<OPTION value='GM'>Gambia</option>
<OPTION value='GE'>Georgia</option>
<OPTION value='DE'>Germany</option>
<OPTION value='GH'>Ghana</option>
<OPTION value='GI'>Gibraltar</option>
<OPTION value='GR'>Greece</option>
<OPTION value='GL'>Greenland</option>
<OPTION value='GD'>Grenada</option>
<OPTION value='GP'>Guadeloupe</option>
<OPTION value='GU'>Guam</option>
<OPTION value='GT'>Guatemala</option>
<OPTION value='GN'>Guinea</option>
<OPTION value='GW'>Guinea-Bissau</option>
<OPTION value='GY'>Guyana</option>
<OPTION value='HT'>Haiti</option>
<OPTION value='HM'>Heard Island and McDonald Islands</option>
<OPTION value='VA'>Holy See (Vatican City State)</option>
<OPTION value='HN'>Honduras</option>
<OPTION value='HK'>Hong Kong</option>
<OPTION value='HU'>Hungary</option>
<OPTION value='IS'>Iceland</option>
<OPTION value='IN'>India</option>
<OPTION value='ID'>Indonesia</option>
<OPTION value='IR'>Iran</option>
<option value='IE'>Ireland</option>
<option value='IL'>Israel</option>
<option value='IT'>Italy</option>
<option value='JM'>Jamaica</option>
<option value='JP'>Japan</option>
<option value='JO'>Jordan</option>
<option value='KZ'>Kazakstan</option>
<option value='KE'>Kenya</option>
<option value='KI'>Kiribati</option>
<option value='KW'>Kuwait</option>
<option value='KG'>Kyrgystan</option>
<option value='LA'>Lao</option>
<option value='LV'>Latvia</option>
<option value='LB'>Lebanon</option>
<option value='LS'>Lesotho</option>
<option value='LR'>Liberia</option>
<option value='LY'>Libyan Arab Jamahiriya</option>
<option value='LI'>Liechtenstein</option>
<option value='LT'>Lithuania</option>
<option value='LU'>Luxembourg</option>
<option value='MO'>Macau</option>
<option value='MK'>Macedonia (FYR)</option>
<option value='MG'>Madagascar</option>
<option value='MW'>Malawi</option>
<option value='MY'>Malaysia</option>
<option value='MV'>Maldives</option>
<option value='ML'>Mali</option>
<option value='MT'>Malta</option>
<option value='MH'>Marshall Islands</option>
<option value='MQ'>Martinique</option>
<option value='MR'>Mauritania</option>
<option value='MU'>Mauritius</option>
<option value='YT'>Mayotte</option>
<option value='MX'>Mexico</option>
<option value='FM'>Micronesia</option>
<option value='MD'>Moldova</option>
<option value='MC'>Monaco</option>
<option value='MN'>Mongolia</option>
<option value='MS'>Montserrat</option>
<option value='MA'>Morocco</option>
<option value='MZ'>Mozambique</option>
<option value='MM'>Myanmar</option>
<option value='NA'>Namibia</option>
<option value='NR'>Nauru</option>
<option value='NP'>Nepal</option>
<option value='NL'>Netherlands</option>
<option value='AN'>Netherlands Antilles</option>
<option value='NT'>Neutral Zone</option>
<option value='NC'>New Caledonia</option>
<option value='NZ'>New Zealand</option>
<option value='NI'>Nicaragua</option>
<option value='NE'>Niger</option>
<option value='NG'>Nigeria</option>
<option value='NU'>Niue</option>
<option value='NF'>Norfolk Island</option>
<option value='KP'>North Korea</option>
<option value='MP'>Northern Mariana Islands</option>
<option value='NO'>Norway</option>
<option value='OM'>Oman</option>
<option value='PK'>Pakistan</option>
<option value='PW'>Palau</option>
<option value='PA'>Panama</option>
<option value='PG'>Papua New Guinea</option>
<option value='PY'>Paraguay</option>
<option value='PE'>Peru</option>
<option value='PH'>Philippines</option>
<option value='PN'>Pitcairn</option>
<option value='PL'>Poland</option>
<option value='PT'>Portugal</option>
<option value='PR'>Puerto Rico</option>
<option value='QA'>Qatar</option>
<option value='RE'>Reunion</option>
<option value='RO'>Romania</option>
<option value='RU'>Russian Federation</option>
<option value='RW'>Rwanda</option>
<option value='SH'>Saint Helena</option>
<option value='KN'>Saint Kitts and Nevis</option>
<option value='LC'>Saint Lucia</option>
<option value='PM'>Saint Pierre and Miquelon</option>
<option value='VC'>Saint Vincent and the Grenadines</option>
<option value='WS'>Samoa</option>
<option value='SM'>San Marino</option>
<option value='ST'>Sao Tome and Principe</option>
<option value='SA'>Saudi Arabia</option>
<option value='SN'>Senegal</option>
<option value='SC'>Seychelles</option>
<option value='SL'>Sierra Leone</option>
<option value='SG'>Singapore</option>
<option value='SK'>Slovakia</option>
<option value='SI'>Slovenia</option>
<option value='SB'>Solomon Islands</option>
<option value='SO'>Somalia</option>
<option value='ZA'>South Africa</option>
<option value='GS'>South Georgia</option>
<option value='KR'>South Korea</option>
<option value='ES'>Spain</option>
<option value='LK'>Sri Lanka</option>
<option value='SD'>Sudan</option>
<option value='SR'>Suriname</option>
<option value='SJ'>Svalbard and Jan Mayen Islands</option>
<option value='SZ'>Swaziland</option>
<option value='SE'>Sweden</option>
<option value='CH'>Switzerland</option>
<option value='SY'>Syria</option>
<option value='TW'>Taiwan</option>
<option value='TJ'>Tajikistan</option>
<option value='TZ'>Tanzania</option>
<option value='TH'>Thailand</option>
<option value='TG'>Togo</option>
<option value='TK'>Tokelau</option>
<option value='TO'>Tonga</option>
<option value='TT'>trinidad and Tobago</option>
<option value='TN'>Tunisia</option>
<option value='tr'>Turkey</option>
<option value='TM'>Turkmenistan</option>
<option value='TC'>Turks and Caicos Islands</option>
<option value='TV'>Tuvalu</option>
<option value='UG'>Uganda</option>
<option value='UA'>Ukraine</option>
<option value='AE'>United Arab Emirates</option>
<option value='UK'>United Kingdom</option>
<option value='UM'>United States Minor Outlying Islands</option>
<option value='US'>United States of America</option>
<option value='UY'>Uruguay</option>
<option value='UZ'>Uzbekistan</option>
<option value='VU'>Vanuatu</option>
<option value='VE'>Venezuela</option>
<option value='VN'>Viet Nam</option>
<option value='VG'>Virgin Islands (british)</option>
<option value='VI'>Virgin Islands (U.S.)</option>
<option value='WF'>Wallis and Futuna Islands</option>
<option value='EH'>Western Sahara</option>
<option value='YE'>Yemen</option>
<option value='YU'>Yugoslavia</option>
<option value='ZR'>Zaire</option>
<option value='ZM'>Zambia</option>
<option value='ZW'>Zimbabwe</option>
</select>
<p>
<input name="calcButton" onclick="calculate(this.form)" type=button value="Calculate Total">
<p>
<b>Total: £ </b><input name="amount" size=8 value="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center">
<action="demo_form.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike"> Free Pen<br>
</p>
<!-- This generates a button that submits the information and send the user into the Worldpay payment pages. -->
<p align="center"><input type=submit value=Checkout onclick="calculate(this.form)"></p>
</form>
</body>
</html>

The ParseInt function only extracts the integer part.
In line 95:
x.amount.value = parseInt(basicprice) + Number(postage_and_packaging);
Change it to following:
x.amount.value = basicprice + Number(postage_and_packaging);

Validate my HTMK form field after my checkbox is checked

I have created an html form with hidden fields that shows after checking checkbox. I want to validate these hidden fields when the checkbox is checked.
style:
.box {
display:none;
}
here javascript code:
$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
}
});
});
<form action="thankyou.php" method="post" name="form9" >
<label>First Name:* </label><input type="text" class="FullContactFields" name="Firstname" required title="Specify your first name"> <br><br>
<label>Last Name:* </label><input type="text" class="FullContactFields" name="Lastname" required title="Specify your last name" > <br><br>
<label>Phone:* </label><input type="text" pattern=".{10}|.{10}" required title="Enter your correct 10 digit phone number" class="FullContactFields" name="UserPhone" required ><br><br>
<label>Email:* </label><input type="email" class="FullContactFields" name="UserEmail" required title="Specify your correct email address." ><br><br>
<div class="checkbox">
<input id="check1" type="checkbox" name="colorCheckbox" value="red">
<label for="check1" class="CheckboxLabel">I would also like quotes for moving my vehicle</label>
</div>
<div class="box">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<td width="52%" valign="top" class="txtmatterarl2" rowspan="2">
</td></tbody></table>
<div style="display: block; color:#fff; padding: 28px 0 0 4px;" id="autozone" fade="1" speed="400">
<!--hide /show -->
<table width="100%" cellspacing="1" cellpadding="1" border="0">
<tbody><tr>
<td width="6%" align="left"> </td>
<td width="16%" align="left"><b><font color="#fff" class="headingcontact">Vehicle Details:</font></b></td>
<td width="7%" align="left"> </td>
<td width="71%" align="left" nowrap="nowrap"><b><font color="#fff" class="headingcontact">Vehicle #2 (Optional):</font></b></td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left">
<select onChange="FillList()" class="TextBox3 nish" id="vehicle1_make" size="1" name="vehicle1_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Make:</td>
<td align="left" >
<select onChange="FillList2()" class="TextBox3 nish" id="vehicle2_make" size="1" name="vehicle2_make">
<option selected="selected" value="">Select Vehicle</option>
<option value="Acura">Acura</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="AMC">AMC</option>
<option value="Aston Martin">Aston Martin</option>
<option value="ATV">ATV</option>
<option value="Auburn">Auburn</option>
<option value="Audi">Audi</option>
<option value="Austin-Healey">Austin-Healey</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Bricklin">Bricklin</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevy">Chevy</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Datsun">Datsun</option>
<option value="Delorean">Delorean</option>
<option value="Dodge">Dodge</option>
<option value="Eagle">Eagle</option>
<option value="Edsel">Edsel</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Fisker">Fisker</option>
<option value="Ford">Ford</option>
<option value="Geo">Geo</option>
<option value="GMC">GMC</option>
<option value="Graham">Graham</option>
<option value="Harley Davidson">Harley Davidson</option>
<option value="Honda">Honda</option>
<option value="Hudson">Hudson</option>
<option value="Hummer">Hummer</option>
<option value="Hyundai">Hyundai</option>
<option value="Infiniti">Infiniti</option>
<option value="International">International</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lasalle">Lasalle</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Lotus">Lotus</option>
<option value="Marmon">Marmon</option>
<option value="Maserati">Maserati</option>
<option value="Maybach">Maybach</option>
<option value="Mazda">Mazda</option>
<option value="McLaren">McLaren</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mercury">Mercury</option>
<option value="Merkur">Merkur</option>
<option value="MG">MG</option>
<option value="MINI">MINI</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Morgan">Morgan</option>
<option value="Nash">Nash</option>
<option value="Nissan">Nissan</option>
<option value="Oldsmobile">Oldsmobile</option>
<option value="Opel">Opel</option>
<option value="Packard">Packard</option>
<option value="Panoz">Panoz</option>
<option value="Plymouth">Plymouth</option>
<option value="Pontiac">Pontiac</option>
<option value="Porsche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Saturn">Saturn</option>
<option value="Scion">Scion</option>
<option value="Smart">Smart</option>
<option value="Sterling">Sterling</option>
<option value="Studebaker">Studebaker</option>
<option value="Subaru">Subaru</option>
<option value="Sunbeam">Sunbeam</option>
<option value="Suzuki">Suzuki</option>
<option value="Talbo">Talbo</option>
<option value="Tesla">Tesla</option>
<option value="Toyota">Toyota</option>
<option value="Triumph">Triumph</option>
<option value="Vanden Plas">Vanden Plas</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="Willys">Willys</option>
<option value="Yugo">Yugo</option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left">
<select class="TextBox3 nish" id="vehicle1_model" name="vehicle1_model" >
<option value="0"> Please Select </option>
</select>
</td>
<td align="left" class="nish4"><font color="#fff">Model:</td>
<td align="left" style="padding: 10px 0 12px;">
<select class="TextBox3 nish" id="vehicle2_model" name="vehicle2_model">
<option value="0"> Please Select </option>
</select>
</td>
</tr>
<tr>
<td height="35" align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle1_year" class="TextBox3 nish" name="vehicle1_year"></td>
<td align="left" class="nish4"><font color="#fff">Year:</td>
<td align="left"><input type="text" size="15" id="vehicle2_year" class="TextBox3 nish" name="vehicle2_year"></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
</tbody></table>
</div>
</div>
<input type="hidden" name="subid" id="subid" value='<?php echo $subid; ?>'/><input type="submit" value="Get Your FREE Quotes" class="OrangeButton"></td>
</form>
</div></div>

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});
$('input[type="checkbox"]').click(function() {
if($(this).attr("value")=="red") {
$(".box").toggle();
// Get/Select all the fields that you want to validate right here and run the validations...
}
});
register click event for all the checkboxes
if the value of the clicked checkbox is 'red'
then select all the elements with class 'box' and toggle them
after this since you have landed in a place where the checkbox with value 'red' is clicked, now you can write your validation code.
Hope this explains...

$('form[name="form9"]').on('submit', function () {
var subidValue = $("#subid").val();
// Now do all the validations that you want to do on the value stored in the variable subidValue
});