SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio button selected form shown

    Hi I have two radio buttons, and I want to be able to show one form if one is selected and another if another is selected. To begin with one form will be shown. How can I do this in js? Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let's start with a standard form design for the three forms.

    Code html4strict:
    <p>
    	<label><input type="radio" name="formChoice" value="form1"> Form 1</label>
    	<label><input type="radio" name="formChoice" value="form2"> Form 2</label>
    </p>
    <form id="form1">
        <p>Form 1</p>
    	<p><label>Field for Form 1 <input type="text" name="form1Field"></label></p>
    	<p><input type="submit"></p>
    </form>
    <form id="form2">
        <p>Form 2</p>
    	<p><label>Field for Form 2 <input type="text" name="form2Field"></label></p>
    	<p><input type="submit"></p>
    </form>

    Next, attach the radio buttons on to events that trigger the change.

    Code javascript:
    var choices = document.getElementsByTagName('choice');
    choices[0].onclick = showForm;
    choices[1].onclick = showForm;

    Then, in the showForm function, loop through each radio button in the same group of the one that was clicked, showing only the form for the one that was clicked, and hiding the other forms.

    Code javascript:
    function showForm() {
    	var radioName = this.name;
    	var radios = document.getElementsByName(radioName);
    	var radio, i;
    	for (i = 0; i < radios.length; i += 1) {
    		var radio = radios[i];
    		if (radio.value === this.value) {
    			show(radio.value);
    		} else {
    			hide(radio.value);
    		}
    	}
    }
    function show(id) {
    	document.getElementById(id).style.display = '';
    }
    function hide(id) {
    	document.getElementById(id).style.display = 'none';
    }

    Then, trigger a click event on the first radio button, so that the other forms become hidden.

    Code javascript:
    choices[0].click();

    Finally, wrap it all up in a nice bow, and prevent anything from leaking out, or leaking in.

    Code javascript:
    (function () {
        ...
    }}();

    Here's the test code:

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Test</title>
    	<style type="text/css">
    	form p {
    		margin: 0;
    	}
    	</style>
    </head>
     
    <body>
    <p>
    <p>
    	<label><input type="radio" name="choice" value="form1"> Form 1</label>
    	<label><input type="radio" name="choice" value="form2"> Form 2</label>
    </p>
    <form id="form1">
        <p>Form 1</p>
    	<p><label>Field for Form 1 <input type="text" name="form1Field"></label></p>
    	<p><input type="submit"></p>
    </form>
    <form id="form2">
        <p>Form 2</p>
    	<p><label>Field for Form 2 <input type="text" name="form2Field"></label></p>
    	<p><input type="submit"></p>
    </form>
    <script type="text/javascript">
    (function () {
    	var choices = document.getElementsByName('choice');
    	choices[0].onclick = showForm;
    	choices[1].onclick = showForm;
    	choices[0].click();
    	function showForm() {
    		var radioName = this.name;
    		var radios = document.getElementsByName(radioName);
    		var radio, i;
    		for (i = 0; i < radios.length; i += 1) {
    			var radio = radios[i];
    			if (radio.value === this.value) {
    				show(radio.value);
    			} else {
    				hide(radio.value);
    			}
    		}
    	}
    	function show(id) {
    		document.getElementById(id).style.display = '';
    	}
    	function hide(id) {
    		document.getElementById(id).style.display = 'none';
    	}
    })();
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul that is brilliant works a treat cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •