Form with radio buttons to hide fields

JavaScript
1

Hi all,

I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:

I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously show/hide the appropriate fields.

Thanks for the help!



            function checkjob(jobvalue){

                    if(jobvalue!="yes") {
                 
document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";
                        document.getElementById("empresa").style.display = "none";
                        document.getElementById("contacto").style.display = "none";

                    }else{
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("empresa").style.display = "block";
                        document.getElementById("contacto").style.display = "block";

                    }

                }

HTML

<div class="form_element">

      		<label >></label>

            <div class="radio_element">

					<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >

                    <span >yes</span>

             </div>

            <div class="radio_element">

					<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">

                    <span >no</span>

            </div>

	</div>
2

If you want the “yes” radio button selected by default, add the attribute ‘checked=“checked”’ as follows

<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" [COLOR="Red"]checked="checked"[/COLOR] />
3

thanks for the help, but the problem is that I don’t want the first radio button to be always checked, because say if they submit and have not filled in all the fields and they go back to the form again, and even if thye had selected the second radio button when the page loads again the first radio button will be selected and this is not what I want, I want it to save what they had checked, any more help? Thanks!

4

The only way I can do it without server side programs is to store the value of “job” in a cookie. You can decide which radio button is checked according to its value.
To learn how to use cookies in Javascript, click here.

5

thanks webgypsy, what do both of those for loops actually do? Just so I understand it. Thanks!

6

sorry I’m not bumping thread, it’s just I can’t edit my last post.

I think the code webgypsy posted is a valid solution but I don’t think this ensures that when the user first loads the page, the first radio button is selected ie “yes”, I know amit gave an answer to this but I think that will set the first radio button as checked always even when they submit the form and haven’t entered all fields for example. Thanks!