Changing form fields dynamically

@rolaids24Jul 27.2010

Below is the html and js I have so far to dynamically place form fields on the form when a certain radio button is marked (Fixed hours). Problem is I can’t get the fields to go away if the other radio button is marked (Variable hours). Solutions on what code my js needs to remove the fields when the opposite radio button is marked? Thanks.

to post a comment

JavaScript

7 Comments(s) _↴

@rolaids24authorJul 27.2010 — #/*HTML*/

<form action="jobpostingform.js" name="jobpostingform" method="post">

...

<input type="radio" name="hours" value="fixed_hours_options" id="fixed_hours" onchange="Toggle(this);" /> <span class="fixed_hours">Fixed Hours</span>

<div class="fixed_hours_options" id="fixed_hours_options" style="display:none;">

<span class="fixed_hours_day"> Hours/day </span><input type="text" name="fixed_hoursperday" class="fixed_hours_day"size="1" maxlength="2"/><br/>

<div class="fixed_days">

<input type="checkbox" name="fixed_monday" class="monday" value="M"/><span class="monday"> Monday</span>

<input type="checkbox" name="fixed_tuesday" class="tuesday" value="Tu"/> <span class="tuesday">Tuesday </span>

<input type="checkbox" name="fixed_wednesday" class="wednesday" value="W"/> <span class="wednesday">Wednesday </span>

<input type="checkbox" name="fixed_thursday" class="thursday" value="Th"/> <span class="thursday">Thursday </span>

<input type="checkbox" name="fixed_friday" class="friday" value="F"/> <span class="friday">Friday </span>

<input type="checkbox" name="fixed_saturday" class="saturday" value="Sa"/><span class="saturday"> Saturday</span>

<input type="checkbox" name="fixed_sunday" class="sunday" value="Su"/> <span class="sunday">Sunday</span><br/>

</div>

</div>

<br/>

<input type="radio" name="hours" id="var_hours" value="var_hours_options" onchange="Toggle(this);"/> <span class="var_hours">Variable Hours</span><br/>

<div id="var_hours_options" class="var_hours_options" style="display:none;">

<div class="var_days">

<input type="checkbox" name="var_monday" value="M" class="monday2" /><span class="monday2"> Monday </span>

<input type="checkbox" name="var_tuesday" value="Tu" class="tuesday2" /> <span class="tuesday2">Tuesday </span>

<input type="checkbox" name="var_wednesday" value="W" class="wednesday2" /><span class="wednesday2"> Wednesday </span>

<input type="checkbox" name="var_thursday" value="Th" class="thursday2" /> <span class="thursday2">Thursday</span>

<input type="checkbox" name="var_friday" value="F" class="friday2" /> <span class="friday2">Friday </span>

<input type="checkbox" name="var_saturday" value="Sa" class="saturday2" /> <span class="saturday2"> Saturday </span>

<input type="checkbox" name="var_sunday" class="sunday2" value="Su"/><span class="sunday2"> Sunday </span><br/>

</div>

<br/>

<span class="var_hours_day">Hours/day</span>

<input type="text" name="var_hoursmon" class="hour_day_mon" size="1" maxlength="2"/>

<input type="text" name="var_hourstues" class="hour_day_tues" size="1" maxlength="2"/>

<input type="text" name="var_hourswed" class="hour_day_wed" size="1" maxlength="2"/>

<input type="text" name="var_hoursthurs" class="hour_day_thurs" size="1" maxlength="2"/>

<input type="text" name="var_hoursfri" class="hour_day_fri" size="1" maxlength="2"/>

<input type="text" name="var_hourssat" class="hour_day_sat" size="1" maxlength="2"/>

<input type="text" name="var_hourssun" class="hour_day_sun" size="1" maxlength="2"/>

</div>

</fieldset><br/>

<span class="duties">Specific Duties</span> <textarea class="duties"></textarea><br/>

<input type="submit" value="Post Job" class="submit_jobform"/>

</form>

/*Javascript*/

function Toggle(obj){

var val=obj.value;

if (!obj.m){ obj.m=''; }

if (!obj.m.match(val)){ obj.m+=','+val+','; }

var hide=obj.m.split(',');

for (var zxc0=0;zxc0<hide.length;zxc0++){

if (document.getElementById(hide[zxc0])){

document.getElementById(hide[zxc0]).style.display='none';

}

}

var show=val.split(',');

for (var zxc1=0;zxc1<show.length;zxc1++){

if (document.getElementById(show[zxc1])){

document.getElementById(show[zxc1]).style.display='';

}

else {

document.getElementById(hide[zxc0]).style.display='none';

}

}

}

@tirnaJul 28.2010 — #

[code=php] 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script  type="text/javascript">
 <!--
 function Toggle(){
 var radBtns = document.getElementsByName("hours");
 var hrType;
 for(var i=0; i < radBtns.length; i=i+1) {
 if(radBtns[i].checked) hrType = radBtns[i].value;
 }
 if(hrType == 'fixed_hours_options') {
 document.getElementById("fixed_hours_options").style.display = 'block';
 document.getElementById("var_hours_options").style.display = 'none'; 

 } else if(hrType == 'var_hours_options') {
 document.getElementById("fixed_hours_options").style.display = 'none';
 document.getElementById("var_hours_options").style.display = 'block';
 }
 }
 //-->
 </script>
 
 </head>
 <body>
 <form action="jobpostingform.js" name="jobpostingform" method="post">
 <input type="radio" name="hours" value="fixed_hours_options" id="fixed_hours" onclick="Toggle();" /> <span class="fixed_hours">Fixed Hours</span> 
 <div class="fixed_hours_options" id="fixed_hours_options" style="display:none;">
 <span class="fixed_hours_day"> Hours/day </span><input type="text" name="fixed_hoursperday" class="fixed_hours_day"size="1" maxlength="2"/><br/>
 <div class="fixed_days">
 <input type="checkbox" name="fixed_monday" class="monday" value="M"/><span class="monday"> Monday</span>
 <input type="checkbox" name="fixed_tuesday" class="tuesday" value="Tu"/> <span class="tuesday">Tuesday </span>
 <input type="checkbox" name="fixed_wednesday" class="wednesday" value="W"/> <span class="wednesday">Wednesday </span>
 <input type="checkbox" name="fixed_thursday" class="thursday" value="Th"/> <span class="thursday">Thursday </span>
 <input type="checkbox" name="fixed_friday" class="friday" value="F"/> <span class="friday">Friday </span>
 <input type="checkbox" name="fixed_saturday" class="saturday" value="Sa"/><span class="saturday"> Saturday</span>
 <input type="checkbox" name="fixed_sunday" class="sunday" value="Su"/> <span class="sunday">Sunday</span><br/>
 </div>
 </div>
 <br/>
 <input type="radio" name="hours" id="var_hours" value="var_hours_options" onclick="Toggle();"/> <span class="var_hours">Variable Hours</span><br/>
 <div id="var_hours_options" class="var_hours_options" style="display:none;">
 <div class="var_days">
 <input type="checkbox" name="var_monday" value="M" class="monday2" /><span class="monday2"> Monday </span>
 <input type="checkbox" name="var_tuesday" value="Tu" class="tuesday2" /> <span class="tuesday2">Tuesday </span>
 <input type="checkbox" name="var_wednesday" value="W" class="wednesday2" /><span class="wednesday2"> Wednesday </span>
 <input type="checkbox" name="var_thursday" value="Th" class="thursday2" /> <span class="thursday2">Thursday</span>
 <input type="checkbox" name="var_friday" value="F" class="friday2" /> <span class="friday2">Friday </span>
 <input type="checkbox" name="var_saturday" value="Sa" class="saturday2" /> <span class="saturday2"> Saturday </span>
 <input type="checkbox" name="var_sunday" class="sunday2" value="Su"/><span class="sunday2"> Sunday </span><br/>
 </div>
 <br/>
 <span class="var_hours_day">Hours/day</span> 
 <input type="text" name="var_hoursmon" class="hour_day_mon" size="1" maxlength="2"/>
 <input type="text" name="var_hourstues" class="hour_day_tues" size="1" maxlength="2"/>
 <input type="text" name="var_hourswed" class="hour_day_wed" size="1" maxlength="2"/>
 <input type="text" name="var_hoursthurs" class="hour_day_thurs" size="1" maxlength="2"/>
 <input type="text" name="var_hoursfri" class="hour_day_fri" size="1" maxlength="2"/>
 <input type="text" name="var_hourssat" class="hour_day_sat" size="1" maxlength="2"/>
 <input type="text" name="var_hourssun" class="hour_day_sun" size="1" maxlength="2"/>
 </div>
 </fieldset><br/>
 <span class="duties">Specific Duties</span> <textarea class="duties"></textarea><br/>
 <input type="submit" value="Post Job" class="submit_jobform"/>
 </form>
 
 </body>
 </html>
 [/code]

@rolaids24authorJul 28.2010 — #Works great! Thanks!!!

@rolaids24authorJul 28.2010 — #So now that I used that code my old field doesn't work. The code I was originally using was working to change the following "select" form field, which won't work with the new code. Ideas to make both work?

Thanks!
------------------------------------------------------------------------

/*HTML*/

Position<select class="position" name="position" onchange="Toggle(this);" >

<option value=""></option><option value="certpa">PA</option>

<option value="certnp">NP</option>

<option value="TB4" >Option 3</option>

</select>

<br/>

<div id="certpa" class="certs" style="display:none;">

Certifications Required

<input type="checkbox" name="cpr" class="cert1" value="CPR"/> <span class="cpr">CPR</span>

<input type="checkbox" name="acls" class="cert2" value="ACLS"/> <span class="acls">ACLS </span>

<input type="checkbox" name="pals" class="cert3" value="PALS"/> <span class="pals">PALS </span>

<input type="checkbox" name="other" class="cert4" id="other" value="Other" onchange="chgother();"/> <span class="other">Other</span>

<input type="text" class="othertext" name="other_jobform" id="other_jobform" size="15"/><br/>

</div>

<div id="certnp" class="certs" style="display:none;">

Certifications Required

<input type="checkbox" name="cpr" class="cert1" value="CPR"/> <span class="cpr">CPR</span>

<input type="checkbox" name="acls" class="cert2" value="ACLS"/> <span class="acls">ACLS </span>

<input type="checkbox" name="pals" class="cert3" value="PALS"/> <span class="pals">PALS </span>

<input type="checkbox" name="other" class="cert4" id="other" value="Other" onchange="chgother();"/> <span class="other">Other</span>

<input type="text" class="othertext" name="other_jobform" id="other_jobform" size="15"/><br/>

</div>

/*Old JS*/

function Toggle(obj){

var val=obj.value;

if (!obj.m){ obj.m=''; }

if (!obj.m.match(val)){ obj.m+=','+val+','; }

var hide=obj.m.split(',');

for (var zxc0=0;zxc0<hide.length;zxc0++){

if (document.getElementById(hide[zxc0])){

document.getElementById(hide[zxc0]).style.display='none';

}

}

var show=val.split(',');

for (var zxc1=0;zxc1<show.length;zxc1++){

if (document.getElementById(show[zxc1])){

document.getElementById(show[zxc1]).style.display='';

}

else {

document.getElementById(hide[zxc0]).style.display='none';

}

}

}

@tirnaJul 28.2010 — #So now that I used that code my old field doesn't work. The code I was originally using was working to change the following "select" form field, which won't work with the new code. Ideas to make both work?

Thanks!
[/quote]

You should have posted all your code in your first post and not just part of it.

It would have been quicker for me to give you code that worked for all your code and not just the bit that you posted than to now tinker with the code to get it to work as well for your "extra" code.

@rolaids24authorJul 29.2010 — #I see. Well thank you for your original code anyway. I figured out the problem while I was waiting for a reply!

@MrRedJul 29.2010 — #I have found over more years than I can count, that once you begin to explain the problem to someone else, you have to include detail that comes in a box labelled "assumption" or "not apparently significant" or "connected to that other problem" in order to explain the problem. And there lies the seed of the solution you find for yourself.

Can't be done so easily until you ask for help!

Also in #JavaScript _↴

Tell radio button why div = $( "div" )[ 0 ]; won't work ?getAttribute() returning odd value for IE

Success!

Help @rolaids24 spread the word by sharing this article on Twitter...

Tweet This

Changing form fields dynamically

7 Comments(s) _↴

Thanks!
------------------------------------------------------------------------

Also in #JavaScript _↴

Success!

Social

Version

Changing form fields dynamically

7 Comments(s) ↴

Thanks! ------------------------------------------------------------------------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Thanks!
------------------------------------------------------------------------

Also in #JavaScript _↴