My submit button does not functioning [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
i tried to submit my form with that java script. But it didn't work as it should be,it doesn't get the value from the script. it's only work for the alert coding in my html body, but it didn't read the function check(), is my form have some problem?
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city" >
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode" >
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel" >CANCEL</button>
</form>
This is my javascript function
function check(){
alert('hi');
var isi1=document.forms["myForm"]["fname"].value;
var isi2=document.forms["myForm"]["lname"].value;
var isi3=document.forms["myForm"]["email"].value;
var isi4=document.forms["myForm"]["tel"].value;
var isi5=document.forms["myForm"]["add1"].value;
var isi6=document.forms["myForm"]["city"].value;
var isi7=document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if(isi2 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi3 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi4 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi5 ==""){
alert("Please complete your detail!");
return false;
}
else if(isi6 ==""){
alert("Please complete your detail!");
return false;
}
else{
alert("Hi "+isi1+" "+isi2+"!! You are succesfully registered to our bookstore!!");
return true;
}
}


Check the working code below:
function check() {
alert('hi');
var isi1 = document.forms["myForm"]["fname"].value;
var isi2 = document.forms["myForm"]["lname"].value;
var isi3 = document.forms["myForm"]["email"].value;
var isi4 = document.forms["myForm"]["telephone"].value;
var isi5 = document.forms["myForm"]["add1"].value;
var isi6 = document.forms["myForm"]["city"].value;
var isi7 = document.forms["myForm"]["country"].value;
if (isi1 == "") {
alert("Please complete all your detail with '*' symbol!");
return false;
}
else if (isi2 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi3 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi4 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi5 == "") {
alert("Please complete your detail!");
return false;
}
else if (isi6 == "") {
alert("Please complete your detail!");
return false;
}
else {
alert("Hi " + isi1 + " " + isi2 + "!! You are succesfully registered to our bookstore!!");
return true;
}
}
<form name="myForm" method="post" onsubmit="return check()">
<table width="100%">
<tr>
<div id="space">
YOUR DETAILS
</div><!-- space -->
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>First Name</td>
<td width="720">
<input type="text" name="fname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Last Name</td>
<td width="720">
<input type="text" name="lname">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Email</td>
<td width="720">
<input type="email" name="email">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Telephone</td>
<td width="720">
<input type="tel" name="telephone">
</td>
</tr>
<tr>
<td width="186">Fax</td>
<td width="720">
<input type="tel" name="fax">
</td>
</tr>
<tr>
<td width="186">Company</td>
<td width="720">
<input type="text" name="company">
</td>
</tr>
<tr>
<td width="186">Company ID</td>
<td width="720">
<input type="text" name="cid">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Address 1</td>
<td width="720">
<input type="text" name="add1">
</td>
</tr>
<tr>
<td width="186">Address 2</td>
<td width="720">
<input type="text" name="add2">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>City</td>
<td width="720">
<input type="text" name="city">
</td>
</tr>
<tr>
<td width="186">Poscode</td>
<td width="720">
<input type="text" name="poscode">
</td>
</tr>
<tr>
<td width="186"><span style="color:red;">*</span>Country</td>
<td width="720">
<select name="country">
<option value="malaysia">Malaysia</option>
<option value="australia">Australia</option>
<option value="japan">Japan</option>
<option value="newzealand">New Zealand</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="check()" name="submit" value="Submit" class="sbutton" />
<button name="subcancel" class="sbutton" value="Cancel">CANCEL</button>
</form>

Related

How to disable all checkboxes when page loads in jquery?

I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!
var users = $("tr")
.filter(function () {
return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
})
.map(function () {
var $row = $(this);
return {
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
}
})
.get();
console.log('Array containing all users with an email:');
console.log(users);
Here's my code - LIVE DEMO:
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:1140px;">
<br/>
<table>
<div>
<tr>
<td align="center" valign="bottom">Select All
<br/>
<input type="checkbox" id="checkAll" value="" />
</td>
<td width="5"></td>
<td width="200" valign="bottom">Name</td>
<td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td>
<td width="50"></td>
<td valign="bottom" style="padding-left: 90px;">Email</td>
</tr>
<tr>
<td style="font-weight: bold;">Group1</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ben Morris</td>
<td align="left" class="usersPhoneNumber">3033422109</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Mike Jeff</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group2</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ana McLwius</td>
<td align="left" class="usersPhoneNumber">3039899231</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Zumia Brown</td>
<td align="left" class="usersPhoneNumber">3033213453</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group3</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Bryan Smith</td>
<td align="left" class="usersPhoneNumber">3033222098</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Junior White</td>
<td align="left" class="usersPhoneNumber">3030098342</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value="">
</td>
<td class="fullName">Peter McDonald</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
</div>
</table>
<button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button>
</div>

You should search email input based on the current element. You are having duplicate ids.
try this:
$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);
Updated Fiddle
Note I have taken leisure to update your code. Hope it helps!
Getting Data
You can try something like this:
Note I have updated Group label rows and have added class in it.
Updated Fiddle
$("#submitButton").on("click", function() {
var result = {};
var group_id = "";
$("table tr").each(function(index, row) {
var $row = $(row)
group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
result[group_id] = result[group_id] || [];
result[group_id].push({
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
});
}
});
console.log(result)
})

Obviously because of the duplicated ids.
try this:
function enable_disable_input(checkbox) {
$(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}

Your code seems a little messy, something like this would work and it's more readable
$(document).ready(function () {
$("#checkAll").change(function () {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
});
$(".input_checkbox").change(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
$('.inputEmail').each(function(){
$(this).prop('disabled', true);
})
});
full working example
Also, you should remove the duplicated ID's.

Adding table cells to end of row using jquery based on radio button selections

I have a (rather large) form which I am constructing. Within the form there are several radio button groups (Yes/No selections). After reading through several related posts here on StackOverflow I have been able to wright a jQuery function which will validate the radio buttons as they are clicked, however I have only been able to make it give a generic alert(). What I would like to happen when the "No" radio is selected is for the jQuery to add a new cell to the same table row with a message "This must be completed". The question posted by SystemError "Add table cell to existing table row, jQuery" appears to give a good fix to my issue if I were to wright a jQuery function for each of the radio buttons. My question is, how would I accomplish this same goal using one function for all of the radio buttons? Here is my form as it stands right now with my attempt to add the cell, which adds the cell between the radio button and the label for it.
// JavaScript Document
"use strict";
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var dd = d.getDay();
var day1;
var day2;
var d_d = d.getMonth();
switch (d_d) {
case 0:
day2 = "January";
break;
case 1:
day2 = "February";
break;
case 2:
day2 = "March";
break;
case 3:
day2 = "April";
break;
case 4:
day2 = "May";
break;
case 5:
day2 = "June";
break;
case 6:
day2 = "July";
break;
case 7:
day2 = "August";
break;
case 8:
day2 = "September";
break;
case 9:
day2 = "October";
break;
case 10:
day2 = "Novmber";
break;
case 11:
day2 = "December";
break;
}
switch (dd) {
case 0:
day1 = "Sunday";
break;
case 1:
day1 = "Monday";
break;
case 2:
day1 = "Tuesday";
break;
case 3:
day1 = "Wednesday";
break;
case 4:
day1 = "Thursday";
break;
case 5:
day1 = "Friday";
break;
case 6:
day1 = "Saterday";
break;
}
document.getElementById("day").value = day1;
document.getElementById("time").value = d.toLocaleTimeString();
document.getElementById("date").value = day2 + " " + d.getDate();
}
function coldValidate(elem) {
var x, text;
x = +elem.value;
if (isNaN(x) || x < 33 || x > 40) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
elem.parentNode.nextElementSibling.innerHTML = text;
}
function freezValidate(elem) {
var x, text;
x = +elem.value;
if (isNaN(x) || x < -10 || x > 10) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
elem.parentNode.nextElementSibling.innerHTML = text;
}
function hotValidate(elem) {
var x, text;
x = +elem.value;
if (isNaN(x) || x < 165) {
text = "Temp Out of Tolerance";
} else {
text = " ";
}
elem.parentNode.nextElementSibling.innerHTML = text;
}
$(document).ready(function() {
$("#storenumber").click(function salad() {
var storenumber = $("#storenumber").val();
switch (storenumber) {
case "011169":
case "008181":
$("#frig1, #frig2, #frig3, #saladbar, #barcheese").removeClass("hide");
break;
case "010576":
case "010324":
case "008615":
case "009150":
case "014640":
case "010684":
case "011168":
case "014215":
case "008179":
case "008339":
case "008668":
case "031574":
$("#frig1, #frig2, #frig3, #saladbar, #barcheese").addClass("hide");
break;
}
});
$('input[type=radio]').on("change", function() {
if ($(this).prop("value") === "False") {
$(this).prepend("<td>This needs to be completed</td>");
}
});
});
/* CSS Document */
header {
text-align: center;
}
td {
border: solid thin #000000;
background-color: #FF0000;
}
th {
border: solid thin #000000;
width: 300px;
background-color: #FF0000;
}
.required {
color: #FFF500;
}
.left {
text-align: right;
width: 480px;
}
.noborder {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
body {
background-color: #061BFF;
}
.nobordererror {
border: none;
background-color: #061BFF;
color: #FFFFFF;
}
.hide {
display: none;
}
<body>
<form>
<section>
<table cellspacing="0px">
<tr>
<th colspan="2" class="noborder">
<h1>Food Safety Checklist</h1>
</th>
</tr>
<tr>
<th colspan="2" class="noborder"><span class="required">*</span>=Required feilds</th>
</tr>
<!-- Identification Information section -->
<tr>
<td class="left"><span class="required">*</span>Store Number:</td>
<td>
<select id="storenumber" name="storenumber" required title="Please select your store ID number">
<option value="">Select Store Number</option>
<option value="010576">010576</option>
<option value="011169">011169</option>
<option value="008181">008181</option>
<option value="010324">010324</option>
<option value="008615">008615</option>
<option value="009150">009150</option>
<option value="014640">014640</option>
<option value="010684">010684</option>
<option value="011168">011168</option>
<option value="014215">014215</option>
<option value="008179">008179</option>
<option value="008339">008339</option>
<option value="008668">008668</option>
<option value="031574">031574</option>
</select>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Day:</td>
<td>
<input type="text" size="10" name="day" id="day" title="Enter current Day" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Date:</td>
<td>
<input type="text" size="9" name="date" id="date" required title="Please enter current date">
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Time:</td>
<td>
<input type="text" size="6" name="time" id="time" title="Enter current time" required>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Initials:</td>
<td>
<input name="initial" type="text" required id="initial" maxlength="2" size="3" title="Enter User ID">
</td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Thermometer Calibration -->
<tr>
<th colspan="2" class="noborder">Thermometer</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Thermometers Calibrated:</td>
<td>
<label>
<input name="cal" type="radio" required id="cal_0" value="Yes" onChange="yesNo(this)">Yes</label>
<label>
<input name="cal" type="radio" required id="cal_1" value="No" onChange="yesNo(this)">No</label>
</td>
<td class="noborder"></td>
</tr>
<tr>
<td colspan="2" class="noborder"> </td>
</tr>
<!-- Cold Temps -->
<tr>
<th colspan="2" class="noborder">Cold Temperature Managment</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (bottom):</td>
<td>
<input name="bottomair" type="text" required id="bottomair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Air Temp (top):</td>
<td>
<input name="topair" type="text" required id="topair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Meat Temp:</td>
<td>
<input name="meat" type="text" required id="meat" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Maketable Cheese Temp:</td>
<td>
<input name="cheese" type="text" required id="cheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Walk In Cooler Temp:</td>
<td>
<input name="walkin" type="text" required id="walkin" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig1" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
<td>
<input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig2" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
<td>
<input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="frig3" class="hide">
<td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
<td>
<input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #1:</td>
<td>
<input name="freez1" type="text" required id="freez1" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #2:</td>
<td>
<input name="freez2" type="text" required id="freez2" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Freezer Unit #3:</td>
<td>
<input name="freez3" type="text" required id="freez3" size="3" onChange="freezValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="saladbar" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Air Temp:</td>
<td>
<input name="saladair" type="text" required id="saladair" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr id="barcheese" class="hide">
<td class="left"><span class="required">*</span>Salad Bar Cheese Temp:</td>
<td>
<input name="saladcheese" type="text" required id="saladcheese" size="3" onChange="coldValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Hot Temp section -->
<tr>
<th class="noborder" colspan="2">Hot Temperature Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Temp:</td>
<td>
<input name="wing" type="text" required id="wing" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Meat Sauce/Soups Temp:</td>
<td>
<input name="sauce" type="text" required id="sauce" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Hold Timing System:</td>
<td>
<label>
<input name="hothold" type="radio" required id="hothold_0" value="Yes">Yes</label>
<label>
<input name="hothold" type="radio" required id="hothold_1" value="No">No</label>
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven Managment -->
<tr>
<th class="noborder" colspan="2">Oven Management</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pizza Tepmp:</td>
<td>
<input name="pizza" type="text" required id="pizza" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Pasta Temp:</td>
<td>
<input name="pasta" type="text" required id="pasta" size="3" onChange="hotValidate(this)">
</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- Oven speed and temp only needsto be done once a week -->
<tr>
<th class="noborder" colspan="2">Oven Temperatures and Speeds</th>
</tr>
<tr>
<td class="left">Top Oven:</td>
<td>
Temp:
<input name="toptemp" type="text" id="toptemp" maxlength="3" size="4">
<br/>Speed:
<input name="topspeed" type="text" id="topspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Center Oven:</td>
<td>
Temp:
<input name="centertemp" type="text" id="centertemp" maxlength="3" size="4">
<br/>Speed:
<input name="centerspeed" type="text" id="centerspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="left">Bottom Oven:</td>
<td>
Temp:
<input name="bottomtemp" type="text" id="bottomtemp" maxlength="3" size="4">
<br/>Speed:
<input name="bottomspeed" type="text" id="bottomspeed" maxlength="3" size="4">
</td>
</tr>
<tr>
<td class="noborder" colspan="2"> </td>
</tr>
<!-- This is the Yes/No section of the checklist
Food Handling Section -->
<tr>
<th class="noborder" colspan="2">Food Hangling</th>
</tr>
<tr>
<td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
<td>
<label>
<input name="approve" type="radio" required value="True">Yes</label>
<label>
<input name="approve" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>No Spoiled/Expired food present:</td>
<td>
<label>
<input name="expired" type="radio" required value="True">Yes</label>
<label>
<input name="expired" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Wing Street Raw Zone Process Followed:</td>
<td>
<label>
<input name="raw" type="radio" required value="True">Yes</label>
<label>
<input name="raw" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Foodis Correcctly Date/Labeled & FIFO is followed:</td>
<td>
<label>
<input name="fifo" type="radio" required value="True">Yes</label>
<label>
<input name="fifo" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Whole Produce is Washed:</td>
<td>
<label>
<input name="produce" type="radio" required value="True">Yes</label>
<label>
<input name="produce" type="radio" required value="False">No</label>
</td>
</tr>
<!-- Sanitation Section -->
<tr>
<td class="left"><span class="required">*</span>Sanitizer is at Correct PPM:</td>
<td>
<label>
<input name="ppm" type="radio" required value="True">Yes</label>
<label>
<input name="ppm" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hot Water ≥ 120°F at 3-Comp. Sink:</td>
<td>
<label>
<input name="hotwater" type="radio" required value="True">Yes</label>
<label>
<input name="hotwater" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Dishwasher has Soap & Sanitizer or ≥ 180°F Water:</td>
<td>
<label>
<input name="soap" type="radio" required value="True">Yes</label>
<label>
<input name="soap" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
<td>
<label>
<input name="chem" type="radio" required value="True">Yes</label>
<label>
<input name="chem" type="radio" required value="False">No</label>
</td>
</tr>
<!-- Health & Hygiene Section -->
<tr>
<th class="left"><span class="required">*</span>No Ill Team Members Working:</th>
<td>
<label>
<input name="illteam" type="radio" required value="True">Yes</label>
<label>
<input name="illteam" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Correct Hand Washing Procedures Followed:</td>
<td>
<label>
<input name="wash" type="radio" required value="True">Yes</label>
<label>
<input name="wash" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hand Sinks (Including Restrooms) are Stocked, Accessible & Used Properly:</td>
<td>
<label>
<input name="sinks" type="radio" required value="True">Yes</label>
<label>
<input name="sinks" type="radio" required value="False">No</label>
</td>
</tr>
<tr>
<td class="left"><span class="required">*</span>Hair Restraints Worn Correctly:</td>
<td>
<label>
<input name="hair" type="radio" required value="True">Yes</label>
<label>
<input name="hair" type="radio" required value="False">No</label>
</td>
</tr>
<!-- Pest Management Section -->
<tr>
<td class="left"><span class="required">*</span>Pest Infestation or Activity is not Present and All Traps Placed Correctly:</td>
<td>
<label>
<input name="pest" type="radio" required value="True">Yes</label>
<label>
<input name="pest" type="radio" required value="False">No</label>
</td>
</tr>
</table>
</section>
<button type="submit">Submit</button>
</form>
</body>
Any help is greatly appreciated.

You have to do a couple of things for that like below. Check demo - Fiddle
remove onChange="yesNo(this)" handler from you html markup, because you are attaching a general handler.
Change if ($(this).prop("value") === "False") { to if ($(this).prop("value") === "No") { because there is no False values in you radios.
Prepend a new td not to the input checkbox like you do, but to the td that holds that checkbox: $(this).closest('td').prepend("<td>This needs to be completed</td>");
So your general handler would look like:
$('input[type=radio]').on("change", function() {
if ($(this).prop("value") === "No") {
$(this).closest('td').prepend("<td>This needs to be completed</td>");
}
});

Subtracting the result of two sums

I'm trying to subtract two totals.
I have one table for incomes, were the final row is the "total incomes" and another table for expenses, with a final row for the "total expenses"
I need to add another function that calculates the total income minus the total expenses. I also need to show a negative amount in case the expenses are greater than the incomes.
My problem is, I don't quite understand how to use the value that its stored on my previous function so I can reuse it on the new one. I'm fairly new to javascript/jquery so I'm having troubles understanding the documentation.
Any guidance on this will be very much appreciated
Here is the js
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txtA").each(function () {
$(this).keyup(function () {
calculateSumA();
calculateSubstraction();
});
});
});
function calculateSumA() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txtA").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sumA").html(sum.toFixed(2));
}
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$(this).keyup(function () {
calculateSum();
calculateSubstraction();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
function calculateSubstraction() {
var subs = calculateSum() - calculateSumA();
$("#subs").html(subs.toFixed(2));
}
here is the html
<body>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr class="income">
<td> </td>
<td align="right">total income:</td>
<td align="center"><span id="sumA">0</span>
</td>
</tr>
</table>
<br/>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td> </td>
<td align="right">total expenses:</td>
<td align="center"><span id="sum">0</span>
</td>
</tr>
</table>
<br/>
<table width="300px" border="1">
<tr>
<td style="width:40px"></td>
<td style="width:62px">Remaining:</td>
<td align="center"><span id="su">0</span>
</td>
</tr>
</table>
http://jsfiddle.net/gnzLwzuy/5/
I know it could be optimized, as I'm repeating the code too much, but If I change it too much It stops working.
(I have too much to learn...)

Just to complement Guruprasad answer, and to responde directly to how can a function access a value calculated by another function.
The easy way:
1 - declare global variables and use them inside your functions.
var foo;
function calculateSumA() {
....
foo = some value;
}
function OtherFunc() {
....
var localVar = foo;
}
2 - make the functions return a value and store it somewhere other functions can access (e.g a global variable);
Not so simple way:
You can use closures to create the illusion of private members.
I wrote an article on JS Closures. I believe it will help you understand the concept quite well, if you are curious about it: https://usonsci.wordpress.com/2014/10/04/closure-with-javascript/

However you are calling calculateSubstraction on keyup of each textbox just take the value from total of each section and subtract it accordingly as below:
function calculateSubstraction() {
var subs=parseFloat($("#sumA").text()) - parseFloat($("#sum").text())
$("#su").html(subs);
}
DEMO
Update
Here is the more optimized version of your code. I prefer blur event than keyup since its more reliable to calculate and reduces the firing of event on every keypress
$(document).ready(function () {
var income = 0;//variable to hold income
var expense= 0; //variable to hold expense
$(".txtA,.txt").blur(function () { //attach event to multiple elements
$(this).each(function () {//loop through each of them
if (!isNaN(this.value) && this.value.length != 0) {
if($(this).hasClass('txt')) //if it is expense
expense += parseFloat(this.value); //add it to expense
else
income+=parseFloat(this.value); //add it to income
}
});
if($(this).hasClass('txt'))
$("#sum").html(expense.toFixed(2)); //display based on income or expense
else
$("#sumA").html(income.toFixed(2));
calculateSubstraction();//this remains same
});
});
Updated DEMO

DEMO
You need to return a value from the add functions so add
return sum.toFixed(2);
return sum.toFixed(2);
from the two function and did the subtraction from the subtract function
var data = calculateSum();
var dataa = calculateSumA();
var subs = dataa-data;
$("#su").html(subs.toFixed(2));

Just Replace your calculateSubstraction() function with this :
function calculateSubstraction() {
var Income = parseFloat($('#sumA').html());
var Expense = parseFloat($('#sum').html());
var subs = Income - Expense;
$("#su").html(subs.toFixed(2));
}

Using jQuery, you can have a simple calculation like
jQuery(function() {
var sum = {
income: 0,
deduction: 0
};
$('input.entry').keyup(function() {
var $table = $(this).closest('table'),
total = 0;
$table.find('input.entry').each(function() {
total += +this.value || 0;
});
$table.find('span.total').html(total)
sum[$table.data('type')] = total;
$('#su').html(sum.income - sum.deduction);
})
})
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border-color: white;
background-color: powderblue;
}
input.entry {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300px" border="1" class="entry" data-type="income">
<tr>
<td width="40px">1</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>income</td>
<td>
<input class="txtA entry" type="text" name="txt" />
</td>
</tr>
<tr class="income">
<td> </td>
<td align="right">total income:</td>
<td align="center"><span class="total">0</span>
</td>
</tr>
</table>
<br/>
<table width="300px" border="1" class="entry" data-type="deduction">
<tr>
<td width="40px">1</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>expense</td>
<td>
<input class="txt entry" type="text" name="txt" />
</td>
</tr>
<tr>
<td> </td>
<td align="right">total expenses:</td>
<td align="center"><span class="total">0</span></td>
</tr>
</table>
<br/>
<table width="300px" border="1">
<tr>
<td style="width:40px"></td>
<td style="width:62px">Remaining:</td>
<td align="center"><span id="su">0</span>
</td>
</tr>
</table>

I've made a pure Javascript version of your code, and added two new functionalities:
A button to dynamically add new rows to the income and expense tables.
And remove the ability of user adding anything other than numbers to the textfields.
The full commented code is below:
/* when all elements of the page are available */
document.addEventListener('DOMContentLoaded', function() {
/* get the tables income and expense, and the 'total' fields */
var income = document.getElementById('income'),
expense = document.getElementById('expense'),
totalIncome = document.getElementById('totalIncome'),
totalExpense = document.getElementById('totalExpense'),
total = document.getElementById('total');
/* create the calculate function */
function calculate(e) {
/* get all the textfields of each table */
var incomes = [].slice.call(income.querySelectorAll('input')),
expenses = [].slice.call(expense.querySelectorAll('input'));
/* calculate the sum of the fields by using
- map to convert the values to numbers
- and reduce to sum those values */
var sumIncome = incomes.map(function(el) {
/* don't allow users to input other values than numbers */
el.value = el.value.replace(/[^0-9\.]/g, '');
return Number(el.value);
}).reduce(function(a, b) {
return a + b;
});
var sumExpense = expenses.map(function(el) {
/* don't allow users to input other values than numbers */
el.value = el.value.replace(/[^0-9\.]/g, '');
return Number(el.value);
}).reduce(function(a, b) {
return a + b;
});
/* change the totalIncome and totalExpense labels */
totalIncome.textContent = sumIncome;
totalExpense.textContent = sumExpense;
/* change the total remaining label */
total.textContent = sumIncome - sumExpense;
}
/* add the event handlers to the oninput event to both tables
they will call the calculate function above when they happen */
income.addEventListener('input', calculate);
expense.addEventListener('input', calculate);
/* this is a bonus, I've added 'new' buttons to dynamically add more rows */
document.addEventListener('click', function(e) {
var el = e.target;
if (el.className === 'new') {
var table = el.parentNode.parentNode.parentNode,
tr = document.createElement('tr');
tr.innerHTML = '<td>' + [].slice.call(table.querySelectorAll('tr')).length + '</td>\
<td>income</td>\
<td>\
<input class="txtA" type="text" />\
</td>';
table.insertBefore(tr, el.parentNode.parentNode);
}
});
});
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border-color: white;
background-color: powderblue;
}
.txt,
.txtA {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
<table id='income' width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>income</td>
<td>
<input class="txtA" type="text" name="txt" />
</td>
</tr>
<tr class="income">
<td>
<button class="new">new</button>
</td>
<td align="right">total income:</td>
<td align="center"><span id="totalIncome">0</span>
</td>
</tr>
</table>
<br/>
<table id='expense' width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>expense</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>
<button class="new">new</button>
</td>
<td align="right">total expenses:</td>
<td align="center"><span id="totalExpense">0</span>
</td>
</tr>
</table>
<br/>
<table width="300px" border="1">
<tr>
<td style="width:40px"></td>
<td style="width:62px">Remaining:</td>
<td align="center"><span id="total">0</span>
</td>
</tr>
</table>

style.display="none" not working

I am trying to do a simple if statement in javascript. The script will determine the visibility of a div based on the option selected in a select.
If I select any option, it will act like I selected "Custom" and display the div. But if I then select "This Month" or "Past Month", it will not return to display="none". The interesting part is that the value of the text boxes, "fromDate" and "toDate", change as if the if statement fired correctly. I can't figure out why they won't return to style.display="none".
<body>
<form name="input" action="mlic_DORReport.cfm?dlFile=1" method="post" style="text-align:center;">
<table align="center">
<tr>
<td>
<h1>Electronic NOS File Generator</h1>
<hr/>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<cfoutput>
<input type="hidden" name="pastFromMonth" id="pastFromMonth" value="#pastFromMonthOp#"/>
<input type="hidden" name="pastEndMonth" id="pastEndMonth" value="#pastEndMonthOp#"/>
<input type="hidden" name="thisFromMonth" id="thisFromMonth" value="#thisFromMonthOp#"/>
<input type="hidden" name="thisEndMonth" id="thisEndMonth" value="#thisEndMonthOp#"/>
</cfoutput>
<div id="customHeader" style="display:none">
<table align="center">
<tr>
<td align="center" style="font-weight:bold;">
Enter dates in "YYYY-MM-DD HH:MM:SS" format
</td>
</tr>
</table>
</div>
<table align="center" cellpadding="1" cellspacing="1" width="65%">
<tr>
<td align="center">
<b>Date Range: </b>
<select name="frombox" id="fromBox" onchange="selectDateRange()">
<option value="Past Month">Past Month</option>
<option value="This Month">This Month</option>
<option value="Custom">Custom</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="customTxtBox" style="display:none">
<cfoutput>
<table align="center">
<tr>
<td align="right">
From:
</td>
<td>
<input type="text" name="fromDate" id="fromDate" mask="YYYY-MM-DD" value="#pastFromMonthOp#"/>
</td>
</tr>
<tr>
<td align="right">
To:
</td>
<td>
<input type="text" name="toDate" id="toDate" mask="YYYY-MM-DD" value="#pastEndMonthOp#"/>
</td>
</tr>
</table>
</cfoutput>
</div>
</td>
</tr>
<tr>
<td align="center">
<b>DMV #: </b>
<select name="txtDmvNumber"/>
<option value="D1111">D1111</option>
<option value="D2222">D2222</option>
<option value="D3333">D3333</option>
<option value="D4444">D4444</option>
<option value="D5555">D5555</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit"/>
</td>
</tr>
<tr>
<td>
<div id="customFooter" style="display:none">
<table align="center">
<tr>
<td align="center">
(Note: The HH:MM:SS section of the "From:" date should be
</td>
</tr>
<tr>
<td align="center">
entered 00:00:00 and the "To:" date should be entered 23:59:59)
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
JS
function selectDateRange() {
var fromboxOption = document.getElementById("fromBox").options[document.getElementById("fromBox").selectedIndex].text;
if (fromboxOption == "Past Month") {
document.getElementById("fromDate").value = document.getElementById("pastFromMonth").value;
document.getElementById("toDate").value = document.getElementById("pastEndMonth").value;
document.getElementById("customHeader").style.display = "none";
document.getElementById("customTxtBox").style.display = "none";
document.getElementById("customFooter").style.display = "none";
}
else if (fromboxOption == "This Month") {
document.getElementById("fromDate").value = document.getElementById("thisFromMonth").value;
document.getElementById("toDate").value = document.getElementById("thisEndMonth").value;
document.getElementById("customHeader").style.display = "none";
document.getElementById("customTxtBox").style.display = "none";
document.getElementById("customFooter").style.display = "none";
}
else(fromboxOption == "Custom") {
document.getElementById("customHeader").style.display = "inline";
document.getElementById("customTxtBox").style.display = "inline";
document.getElementById("customFooter").style.display = "inline";
}
}
</body>

On the last condition of your if statement you included an expression without an 'if'. Change it from
else (fromboxOption == "Custom")
to
else if (fromboxOption == "Custom")

Filling multiple textboxes using javascript

Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.
I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.
Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:
<form name="isForm" action="">
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
</tr>
<tr>
<td>Last Name:
<input type="hidden" id=queryType name=queryType value="P" />
<input type="text" size="20" autocomplete="off" id="searchField" name="searchField" />
</td>
<td>First Name:
<input type="text" size="20" autocomplete="off" id="firstField" name="firstField" />
</td>
<td align="center" valign="bottom">
<input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle"
onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);
document.getElementById('nameField').innerHTML='';
this.disabled = true;
doCompletion();" >
</td>
<td><div id="nameField"></div></td>
</tr>
<tr>
<td colspan="4">
<table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
<td colspan="3"> </td>
</tr>
</table>
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="3" class="columnHeaderClass">ID(s)</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"><input name="Student_ID" type="text" id="idField" /></td>
<td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
<td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
<td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
<td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
<td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
<td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
<td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
<td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
<td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
<td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
</tr>
<tr>
<td colspan="3">
<div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S">
</div>
</td>
</tr>
</table>
So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.

I think you want something like
function fillNextEmptyTb() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0; i < allInputs.length; i++)
if (allInputs[i].type === "text" && allInputs[i].value == "") {
allInputs[i].value = "whatever you want";
return;
}
}
Or the jQuery way, if you're using it, or plan to try it:
var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");

Categories