Java script to make form fields dependable

[pavellka]

Hi,

I would appreciate your assistance. I run an assessment form based on php on my Web site. I need to make certain filling fields dependable on others. For example, if a visitor indicates “Yes” in the field “A”, field “B” becomes mandatory to fill.

I asked people who created the php script for the Web site but they advised that it is easier to implement through JavaScript on client's side.

Could you please advise where to get such a script. Thank you.

Pavellka.

[Valera Selev]

Set the "disabled" property of a desired form element to true or false.

[adios]

Not many 'drop-in' script components for this; it really depends on exactly how you want to proceed.

[pavellka]

Hi,

Thank you for your advice! Being a non-technical person I do not understand much about the stuff.

Valera, could you please specify about this: "Set the "disabled" property of a desired form element to true or false."?

I will try to make it more clear. The form I am dealing with is an assessment form. A vistor is supposed to indicate:
1. How many years of employment experience he/she has;
2. If the visitor has any experience he must fill the following details: job titles; periods of employment (from month/year to month/year).

Many visitors indicate just years of employment but do not bother to provide further details, which makes the assessment imposiible.

I know how to make the "Employment Records" details fields mandatory but I cannot do this because it could happen that a visitor does not have any experience and it will be frustrating for him.

So, the idea is to make the files mandatory only if the visitor has some experience.

Any way (page reload with "required" or any other) that could help get the goal would be fine. To make it more clear I provide the fileds below.

Thank you for your time!

Pavellka

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<tr>
<TD ALIGN="left" Width="45%" style="border-style:solid; border-color:#FFFFFF;"><P>Duration of <b>paid full-time</b> work experience for the last 10 years. Do <b>NOT</b> include work that was part of a training or study program.
</TD>
<TD ALIGN="LEFT" bgcolor="cccccc" style="border-style:solid; border-color:#FFFFFF;">
<SELECT NAME="r_Years_of_Employment">
<OPTION value="">Please select</OPTION>
<OPTION value="0">Did not work</OPTION>
<OPTION value="Less than 0,5">Less than half a year</OPTION>
<OPTION value="Half a year">Half a year</OPTION>
<OPTION value="1 year">1 year</OPTION>
<OPTION value="1,5 years">1,5 years</OPTION>
<OPTION value="2 years">2 years</OPTION>
<OPTION value="2,5 years">2,5 years</OPTION>
<OPTION value="3 years">3 years</OPTION>
<OPTION value="3,5 years">3,5 years</OPTION>
<OPTION value="4 years">4 years</OPTION>
<OPTION value="4,5 years">4,5 years</OPTION>
<OPTION value="5 years">5 years</OPTION>
</SELECT>
</TD>
</TR>
</table>

<p></p>

<table width="100%">
<tr>
<td >Provide job title/period of work. Please start with the most <b>recent/present</b> occupation:
</td>
</tr>
</table>
<table>
<TR>
<td bgcolor=cccccc><input size=28 type=text name="z_Recent_Job_Title1">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="Recent_Work_Start_Month1">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Recent_Work_Start_Year1" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
<TD bgcolor="cccccc" >to month:
<SELECT NAME="Recent_Work_End_Month1">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Recent_Work_End_Year1" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
</TR>
<TR>
<td bgcolor=cccccc><input size=28 type=text name="z_Previous_Job_Title2">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="Previous_Work_Start_Month2">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_Start_Year2" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
<TD bgcolor="cccccc">to month:
<SELECT NAME="Previous_Work_End_Month2">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_End_Year2" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
</TR>
<TR>
<td bgcolor=cccccc><input size=28 type=text name="z_Previous_Job_Title3">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="Previous_Work_Start_Month3">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_Start_Year3" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
<TD bgcolor="cccccc">to month:
<SELECT NAME="Previous_Work_End_Month3">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_End_Year3" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
</TR>
<TR>
<td bgcolor=cccccc><input size=28 type=text name="z_Previous_Job_Title4">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="Previous_Work_Start_Month4">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_Start_Year4" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
<TD bgcolor="cccccc">to month:
<SELECT NAME="Previous_Work_End_Month4">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_End_Year4" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
</TR>
<TR>
<td bgcolor=cccccc><input size=28 type=text name="z_Previous_Job_Title5">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="Previous_Work_Start_Month5">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_Start_Year5" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
<TD bgcolor="cccccc">to month:
<SELECT NAME="Previous_Work_End_Month5">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="Previous_Work_End_Year5" MAXLENGTH="4" VALUE="" SIZE="1">
</TD>
</TR>
</table>

[Valera Selev]

The easiest way is to perform this checking on server.

But if you want to disable inputs for usability you may write something like this:

<SELECT NAME="r_Years_of_Employment" onchange="(this.value==0)?check(true):check(false)">

[skipped]

then add this piece of code:

<script type="text/javascript">
function check(param) {
  for (i=1;i<=5;i++) {
    document.getElementById('jt'+i).disabled=param;
    document.getElementById('smon'+i).disabled=param;
    document.getElementById('emon'+i).disabled=param;
    document.getElementById('rwsy'+i).disabled=param;
    document.getElementById('rwey'+i).disabled=param;
  }
}
</script>

After that you'd set the "id" property to every element of the lower form following the rules:

for "job title" it should be jt1, jt2,..., jt5
for "start month" it should be smon1, smon2,..., smon5
for "end month" - emon1, emon2,..., emon5
for "start year" - rwsy1, rwsy12,..., rwsy15
for "end year" - rwey1, rwey12,..., rwey15

Of course, you can make id's more readable - just dont forget to make corresponding replaces in script.

Questions?

[pavellka]

Valera,

Thank a lot!

I must first try it first as I cannot read like that. (It is not that easy for me). Only after I try it I can see "what is what" and how it works.

I will play with it and report the results.

[pavellka]

Valera,

It looks like I am missing something. I've done the following:

Code before </head> :

function check(param) {
for (i=1;i<=5;i++) {
document.getElementById('jobtitle'+i).disabled=param;
document.getElementById('startmonth'+i).disabled=param;
document.getElementById('endmonth'+i).disabled=param;
document.getElementById('rwstartyear'+i).disabled=param;
document.getElementById('rwendyear'+i).disabled=param;

}
}

Added to HTML:

<SELECT NAME="r_Years_of_Employment" onchange="(this.value==0)?check(true):check(false)">

Then id for all 5 of them as:

<td bgcolor=cccccc><input size=28 type=text name="rz_Recent_Job_Title1" id="jobtitle1">
</TD>
<TD bgcolor="cccccc">from month:
<SELECT NAME="r_Recent_Work_Start_Month1" id="startmonth1">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="r_Recent_Work_Start_Year1" MAXLENGTH="4" VALUE="" SIZE="1" id="rwstartyear1">
</TD>
<TD bgcolor="cccccc">to month:
<SELECT NAME="r_Recent_Work_End_Month1" id="endmonth1">
<OPTION value="">-</OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
</SELECT>
year:
<INPUT TYPE="text" NAME="r_Recent_Work_End_Year1" MAXLENGTH="4" VALUE="" SIZE="1" id="rwendyear1">
</TD>
</TR>
<TR>

and so on for all 5 of them.

Nothing has changed. It does not make mandatory.

When I set value 0 in
<OPTION value="">Please select</OPTION>
<OPTION value="0">No experience</OPTION>
<OPTION value="Less than 0,5">Less than half a year</OPTION>
<OPTION value="Half a year">Half a year</OPTION>

it does not show 0 in error messaqge. Can I set 00 here and in ="(this.value==0)?

Thank you!
Pavellka

[pavellka]

Valera,

It works. Thank you.

But it looks like I cannot use it. It makes all 5 "employment" fields mandatory but if a visitor has, for example, only two records he is forced to fill all five...

It is my mistake. I just forgot about it. Sorry.

Pavellka

[Valera Selev]

But it looks like I cannot use it. It makes all 5 "employment" fields mandatory but if a visitor has, for example, only two records he is forced to fill all five...
It is my mistake. I just forgot about it. Sorry.

I hope now you're able to do it yourself basing on my piece of code.
Still, any questions are welcome.

But the best way to do this kind of checking is sever-side scripting.

[adios]

...but if a visitor has, for example, only two records...

What's the data that indicates how many records the user has? The drop-down seems to specify time worked, not specific jobs.

Might be better to use a dynamic form here, with a user-selectable number of fieldsets for data entry.

http://www.quirksmode.org/dom/domform.html

[pavellka]

Guys, thank you so much!

Valera, it is pretty educating for me and I will defirntely use it.

Adios, visitors have to indicate job titles and periods of work though just duration without "from... to..." would be also fine.

The link is something new and really interesting for me. I need to examine this more closely. Thanks.

Pavellka.

[adios]

hi pavellka...

This is pretty rough but it should give you the general idea. No validation included but, easy enough to add.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>&laquo;&laquo;&laquo; Work History &raquo;&raquo;&raquo;</title>
<style type="text/css">

html {
	background: url(http&#58;//www.allfreebackgrounds.com/backgrounds/backs/stripes/ltgrayblk.gif);
}
table {
	width: 720px;
	margin: 40px auto 0 auto;
	border: 4px #fff;
	border-style: ridge groove groove ridge;
	background: buttonface;
}
th {
	font: normal 13px "times new roman", serif;
	letter-spacing: .2em;
	border: 1px #ccc dashed;
}
td {
	font: normal 13px "times new roman", serif;
	padding: 4px;
	border: 1px #ccc dashed;
}
.tfield {
	width: 220px;
	font: normal 12px "times new roman", serif;
	background: #f8f8f8;
}
select, input {
	width: 100px;
	font: normal 12px "times new roman", serif;
	background: #f8f8f8;
}

</style>
<script type="text/javascript">

var counter = 1;

function addJob(f)
{
	counter++;
	var newMod = document.getElementById('jobmodule').cloneNode(true);
	var countnode = newMod.getElementsByTagName('td').item(0);
	var count = document.createTextNode(String(counter));
	countnode.replaceChild(count, countnode.lastChild);
	var i = 0, el, els = newMod.getElementsByTagName('select');
	while (el = els.item(i++))
	{
		el.name = el.name.replace(/\d$/, counter);
		f.elements[el.name] = f[el.name] = el;
	}
	i = 0, els = newMod.getElementsByTagName('input');
	while (el = els.item(i++))
	{
		el.name = el.name.replace(/\d$/, counter);
		f.elements[el.name] = f[el.name] = el;
	}
	var mainbody = document.getElementById('main');
	mainbody.appendChild(newMod);
}

function removeJob()
{
	if (counter > 1)
	{ 
		var mainbody = document.getElementById('main');
		mainbody.removeChild(mainbody.lastChild);
		--counter;
	}
}

function startAgain()
{
	if (confirm('This will clear all entries !\n\nAre you sure ?\n\n'))
	{
		while (counter > 1)
			removeJob();
		document.getElementById('workhistory').reset();
	}
}

function checkDates(s)
{
	var f = s.form;
	var n = s.name.match(/_(\d+)$/)[1];
	var smonth = f.elements['Work_Start_Month_' + n];
	var syear = f.elements['Work_Start_Year_' + n];
	var emonth = f.elements['Work_End_Month_' + n];
	var eyear = f.elements['Work_End_Year_' + n];
	if (smonth.value && syear.value && emonth.value && eyear.value)
	{
		var sdate = new Date(smonth[smonth.selectedIndex].text + ' ' + '1' + ',' + syear[syear.selectedIndex].text);
		var edate = new Date(emonth[emonth.selectedIndex].text + ' ' + '1' + ',' + eyear[eyear.selectedIndex].text);
		if (edate.getTime() <= sdate.getTime())
		{
			alert('\nThe end date must be later than the start date.\n');
			s.selectedIndex = 0;
		}
	}
}

</script>
</head>
<body>
<form id="workhistory" name="workhistory">
<table>
<tbody>
<tr>
<td colspan="4" style="border:none;">Duration of <u>paid full-time</u> work experience for the last 10 years
_________________________ 
<select name="r_Years_of_Employment" style="width:124px;position:relative;top:8px;background:#eef;">
<option value="">• Please select</option>
<option value=""></option>
<option value="0">• Did not work</option>
<option value="Less than .5">• Less than 1/2 year</option>
<option value=".5">• 1/2 year</option>
<option value="1">• 1 year</option>
<option value="1.5">• 1 1/2 years</option>
<option value="2">• 2 years</option>
<option value="2.5">• 2 1/2 years</option>
<option value="3">• 3 years</option>
<option value="3.5">• 3 1/2 years</option>
<option value="4">• 4 years</option>
<option value="4.5">• 4 1/2 years</option>
<option value="5">• 5 years</option>
</select>
<br />Do <strong>NOT</strong> include work that was part of a training or study program.</td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td style="text-align:center;"><input type="button" value="add job" style="background:#efe;" onclick="addJob(this.form)" /></td>
<td style="text-align:center;"><input type="button" value="remove job" style="background:#fee;" onclick="removeJob()" /></td>
<td style="text-align:center;"><input type="button" value="start again" style="background:#ffe;" onclick="startAgain()" /></td>
<td style="text-align:center;"><input type="submit" value="next" style="background:#fff;" /></td>
</tbody>
</table>
<table>
<thead>
<tr style="background:#aaa;">
<th style="font-weight:bold;">#</th><th>Job Title</th><th>Start Month</th><th>Start Year</th><th>End Month</th><th>End Year</th>
</tr>
</thead>
<tbody id="main">
<tr id="jobmodule">
<td style="font-weight:bold;">1</td>
<td><input class="tfield" type="text" name="Job_Title_1" value="" /></td>
<td><select name="Work_Start_Month_1" onchange="return checkDates(this)">
<option value="">month</option>
<option value=""></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></td>
<td><select name="Work_Start_Year_1" onchange="return checkDates(this)">
<option value="">year</option>
<option value=""></option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
</select></td>
<td><select name="Work_End_Month_1" onchange="return checkDates(this)">
<option value="">month</option>
<option value=""></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></td>
<td><select name="Work_End_Year_1" onchange="return checkDates(this)">
<option value="">year</option>
<option value=""></option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
</select></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

[vikrantkorde]

tooo much helpful