...
PDA

View Full Version : Resolved Javascript - if radio button selected then show & validate 4 other text fields

BearCat97
05-28-2009, 07:49 PM
I am a new ASP programmer and need some assistance. I have only been doing small edits to exsisting pages and now have to create one.

I have a form that if you select candidate=yes, then four hidden fields appear and then those text fields have to be validated as well. But i am having trouble with how to code that piece.

Here is the page code so far. I have hilighted the problem code in red that I need assistance with.



<html>
<head>
<title>International Assignment Form</title>

<script type="text/javascript">
function doClick(objcandidate){
if (objcandidate.value=="0"){
document.getElementById("textbox").style.display='none'; //hide textbox
document.getElementById("otherOpt").style.display='block'; //show other options
}
else{
document.getElementById("otherOpt").style.display='none'; //hide other options
document.getElementById("textbox").style.display='block'; //show textbox
}
}
</script>

<script ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--
function val(){
if (document.form1.primaryNeed.value == ""){
alert("Please select primary business purpose or need.\n");
document.form1.primaryNeed.focus();
return (false);
}
if (document.form1.businessNeed.value == ""){
alert("Please provide additional information related to the business needs.\n");
document.form1.businessNeed.focus();
return (false);
}
if (document.form1.desiredResults.value == ""){
alert("Please describe results of the international assignment.\n");
document.form1.desiredResults.focus();
return (false);
}
if (document.form1.countryAssignment.value == ""){
alert("Please enter the country location of the assignment.\n");
document.form1.countryAssignment.focus();
return (false);
}
if (!document.form1.localSkill[0].checked && !document.form1.localSkill[1].checked){
alert("What is the desires skill available locally.\n");
document.form1.localSkill.focus();
return (false);
}
if (document.form1.accomplishGoals.value == ""){
alert("What is the anticipated length of time to accomplish the established goals.\n");
document.form1.accomplishGoals.focus();
return (false);
}
if (!document.form1.beInCountry[0].checked && !document.form1.beInCountry[1].checked){
alert("Please answer the question, does the business need require constant presence in country.\n");
document.form1.beInCountry.focus();
return (false);
}
if (document.form1.payGrade.value == ""){
alert("What is the anticipated pay grade of the position.\n");
document.form1.payGrade.focus();
return (false);
}
if (document.form1.candidate.value == ""){
alert("What is the anticipated pay grade of the position.\n");
document.form1.payGrade.focus();
return (false);
}


if (document.form1.candidate.value == "Yes" then){

}

candidateName

salary

familyMembers

familySchoolAge



if (document.form1.buHRAddressInfo.value == ""){
alert("Please select an option within Business Unit HR dropdown.\n");
document.form1.buHRAddressInfo.focus();
return (false);
}
}else{
document.form1.submit();
}
}
//-->
</script>

<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="portalText"><p>To receive a cost estimate for an international assignment, please answer the following questions. An estimate will be prepared and returned to you via e-mail within 48 hours.<br><br></p></td>
</tr>
</table>

<form action="Intl_Assignment_Form_2.asp" method="post" name="form1">

<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Select the primary business purpose or need</td>
<td class="multiRowTable portalText">
<select name="primaryNeed">
<option value="">-- select one --</option>
<option value="1">1) Stop Gap</option>
<option value="2">2) Project / Knowledge Transfer</option>
<option value="3">3) Business Growth</option>
<option value="4">4) Development</option>
</select>
<br>
<span class="portalTextItalic">(refer to additional information portlet on the right)</span></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold">Select the secondary business purpose or need, if applicable</td>
<td class="multiRowTable portalText">
<select name="secondNeed">
<option value=""> </option>
<option value="1">1) Stop Gap</option>
<option value="2">2) Project / Knowledge Transfer</option>
<option value="3">3) Business Growth</option>
<option value="4">4) Development</option>
</select>
</td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Please provide additional information related to the business needs</td>
<td class="multiRowTable portalText"><textarea name="businessNeed" cols="50" rows="2" id="businessNeed"></textarea></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Describe the desired results of the international assignment</td>
<td class="multiRowTable portalText"><textarea name="desiredResults" cols="50" rows="2" id="desiredResults"></textarea></td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>What is the country location of the assignment?</td>
<td class="multiRowTable portalText"><input name="countryAssignment" type="text" id="countryAssignment" size="60"></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Is the desired skill available locally?</td>
<td class="multiRowTable portalText"><input type="radio" name="localSkill" value="Yes">Yes<input type="radio" name="localSkill" value="No">No</td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>What is the anticipated length of time to accomplish the established goals?</td>
<td class="multiRowTable portalText">
<select name="accomplishGoals">
<option value="0">-- select one --</option>
<option value="3 months">3 months</option>
<option value="3-6 months">3-6 months</option>
<option value="6-12 months">6-12 months</option>
<option value="12 months or more">12 months or more</option>
<option value="Ongoing assignment">Ongoing assignment</option>
</select></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Does the business need require constant presence in country?</td>
<td class="multiRowTable portalText"><input type="radio" name="beInCountry" value="Yes">Yes<input type="radio" name="beInCountry" value="No">No</td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>What is the anticipated pay grade of the position?</td>
<td class="multiRowTable portalText"><input name="payGrade" type="text" id="payGrade" size="20"></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Have you identified a candidate?</td>
<td class="multiRowTable portalText"><input type="radio" name="candidate" id="candidate" value="0" onclick="doClick(this)">Yes<input type="radio" name="candidate" id="candidate" value="1" onclick="doClick(this)">No</td>
</tr>
</table>

<div id="otherOpt" style="display:none">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr bgcolor="ffffff" class="epi-rowEven">
<td class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Name of candidate</td>
<td class="multiRowTable portalText"><input name="candidateName" type="text" id="candidateName" size="40"></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>What is the proposed salary of the position?</td>
<td class="multiRowTable portalText"><input name="salary" type="text" id="salary" size="20"></td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>How many family members does the candidate have?</td>
<td class="multiRowTable portalText"><input name="familyMembers" type="text" id="familyMembers" size="20"></td>
</tr>
<tr bgcolor="ffffff">
<td width="400" class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Number of school age children in family?</td>
<td class="multiRowTable portalText"><input name="familySchoolAge" type="text" id="familySchoolAge" size="20"></td>
</tr>
</table>
</div>

<div id="textbox" style="display:none"></div>
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr bgcolor="ffffff" class="epi-rowEven">
<td class="multiRowTable portalTextBold">Additional comments </td>
<td class="multiRowTable portalTextBold"><textarea name="comments" cols="50" rows="2" id="comments"></textarea></td>
</tr>
<tr bgcolor="ffffff">
<td class="multiRowTable portalTextBold"><span class="portalErrorText">* </span>Business Unit</td>
<td class="multiRowTable portalTextBold">
<select name="buHRAddressInfo">
<option value="" selected>(select one)</option>
<option value="contact one">contact one</option>
<option value="contact two">contact two</option>
<option value="contact three">contact three</option>
<option value="contact four">contact four</option>
</select> </td>
</tr>
<tr bgcolor="ffffff" class="epi-rowEven">
<td width="400" class="multiRowTable portalTextBold">Email address of the person completing the form</td>
<td class="multiRowTable portalTextBold"><%= emailAddress %><input name="emailAddress2" type="hidden" value="<%= emailAddress2 %>"></td>
</tr>
<tr>
<td colspan="2"><br><span class="portalErrorText">* </span><span class="portalText"> = Required<br><br></span>
<input type="button" name="Button" value="Submit" onClick="val()"></td>
</tr>
</table>
</form>
<br><br>
</body>
</html>
Old Pedant
05-29-2009, 01:19 AM
You need to learn to use a DEBUGGER!

Best is FireBug for FF, but even the MS Script debugger for MSIE is better than nothing.

Immedieately, my debugger found this error in your JS code:

if (document.form1.candidate.value == "Yes" then){


Too much VBScript coding. <grin/>

Of course, then you have this junk in the JS:

candidateName

salary

familyMembers

familySchoolAge

But one step at a time.

You also have an extra } here:

if (document.form1.buHRAddressInfo.value == "")
{
alert("Please select an option within Business Unit HR dropdown.\n");
document.form1.buHRAddressInfo.focus();
return (false);
}
}else{
document.form1.submit();
}

Also, you should *not* call the <FORM>'s submit function.

Instead, just return true/false to the onsubmit handler, and have it do a return.

Also, you can't get the ".value" property of a set of radio buttons (or checkboxes). You have to write a JS function to do that. But you don't really need that, here. You just need to check the ".checked" property of the YES button.
Old Pedant
05-29-2009, 01:22 AM
Here's the JS code, fixed:

<script type="text/javascript">
function doClick(objcandidate)
{
var hascan = ( objcandidate.value == "0" );
document.getElementById("textbox").style.display = hascan ? 'none' : 'block';
document.getElementById("otherOpt").style.display = hascan ? 'block' : 'none';
}

function validateForm(form)
{
if (form.primaryNeed.value == ""){
alert("Please select primary business purpose or need.\n");
form.primaryNeed.focus();
return false;
}
if (form.businessNeed.value == ""){
alert("Please provide additional information related to the business needs.\n");
form.businessNeed.focus();
return false;
}
if (form.desiredResults.value == ""){
alert("Please describe results of the international assignment.\n");
form.desiredResults.focus();
return false;
}
if (form.countryAssignment.value == ""){
alert("Please enter the country location of the assignment.\n");
form.countryAssignment.focus();
return false;
}
if (!form.localSkill[0].checked && !form.localSkill[1].checked){
alert("What is the desires skill available locally.\n");
// can't focus on radio buttons form.localSkill.focus();
return false;
}
if (form.accomplishGoals.value == ""){
alert("What is the anticipated length of time to accomplish the established goals.\n");
form.accomplishGoals.focus();
return false;
}
if (!form.beInCountry[0].checked && !form.beInCountry[1].checked){
alert("Please answer the question, does the business need require constant presence in country.\n");
// can't focus form.beInCountry.focus();
return false;
}
if (form.payGrade.value == ""){
alert("What is the anticipated pay grade of the position.\n");
form.payGrade.focus();
return false;
}
if (form.candidate[0].checked )
{
if ( form.candidateName.value==""){
alert("you must give the candidate's name");
form.candidateName.focus();
return false;
}
if ( form.salary.value==""){
alert("you must give the candidate's proposed salary");
form.salary.focus();
return false;
}
if ( form.familyMembers.value==""){
alert("you must give the candidate's family members");
form.familyMembers.focus();
return false;
}
if ( form.familySchoolAge.value==""){
alert("you must give the ages of candidate's school-age children");
form.familySchoolAge.focus();
return false;
}
}
if (form.buHRAddressInfo.value == "")
{
alert("Please select an option within Business Unit HR dropdown.\n");
form.buHRAddressInfo.focus();
return false;
}

return true;
}
</script>

Your validation is pretty bad. You allow somebody to type in nothing but a space to answer every one of those text questions. Ugh. But I'll leave that to you.

Note that this revised JS requires changing your <form> and your submit button, thus:

<form action="Intl_Assignment_Form_2.asp" method="post" name="form1" onsubmit="return validateForm(this);">

and

<input type="submit" name="Button" value="Submit">
BearCat97
05-29-2009, 03:48 PM
Thanks so much for the assistance Old Pedant. It is MUCH appreciated!!!

I inherited this and other ASP forms from a previous web publisher and am trying to understand it all. Would you recommend any helpful sites, books, or classes that I could use.

Thanks again!
Old Pedant
05-29-2009, 07:57 PM
Well, all of what you have shown so far is just JavaScript coding, and there are more "help" sites out there for JS than fish, it seems. Heck, if nothing else, chances are good you can search these forums & find answers. But let's face it, google is your friend.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum