Forum Moderators: open
I would like to make my form a bit interactive for the user. I mean I want to create forms that display additional fields on the form according to the answer given.
For example, using a radio button. If the user tick on Yes, the invisible fields will be displayed but if they select on No, it will disappear.
Much appreciated for anyone who can help me out?
<form name=theform>
<input type=checkbox name=boobo value=yes onclick="if (this.checked) { document.getElementById('secondcheckbox').style.display='block';} else {document.getElementById('secondcheckbox').style.display='none';}"> First checkbox
<div id=secondcheckbox style="display:none"><input type=checkbox name=secondcheckbox> Second checkbox</div>
</theform>[edited by: MichaelBluejay at 8:20 am (utc) on Dec. 8, 2006]
I mean I want to create forms that display additional fields on the form according to the answer given.For example, using a radio button. If the user tick on Yes, the invisible fields will be displayed but if they select on No, it will disappear.
Well, first, consider the base case. You should design your pages to work without JavaScript enabled, so first layout your form to include all of the inputs:
<form action="#">
<div>
Got Milk?
<input type="radio" name="gotMilk" id="gotMilkYes"> Yes
<input type="radio" name="gotMilk" id="gotMilkNo"> No
<div id="milkOptions">
Is it chocolate milk?
<select name="chocolate" id="chocolate">
<option value="false" selected="selected">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>
</form>
Now all the options will be available even if the user has JavaScript disabled. Next, attach your behaviors. Note, I've defined the script in the page, but you would be better to put it in it's own file and link it in. Also, I'm using a someone complex notation... if you have any questions about this, please ask:
<!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>Example</title>
</head>
<body>
<form action="#">
<div>
Got Milk?
<input type="radio" name="gotMilk" id="gotMilkYes" > Yes
<input type="radio" name="gotMilk" id="gotMilkNo" checked="checked"> No
<div id="milkOptions">
Is it chocolate milk?
<select name="chocolate" id="chocolate">
<option value="false" selected="selected">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>
</form>
<script type="text/javascript">
/**
* Your Page Behaviors
*/
var YourPage = function(){
// Private variables
var choc = null;
// Public methods
return {
/**
* Initialize the behaviors for the page
*/
init : function(){
// Attach your listeners
attachListeners();
},
/**
* Show or hide the milk options
*/
toggleChocolate : function(bShow){
if(!choc ) return;
choc.style.display = (bShow?'block':'none');
}
};
// Private methods
function attachListeners(){
// Get the Chocolate Milk section
choc = document.getElementById("milkOptions");
// Get the Got Milk radio buttons
var gmYes = document.getElementById("gotMilkYes");
var gmNo = document.getElementById("gotMilkNo");
// If they were found, attach a listener to their onclick event handlers
if( gmYes && gmNo )
{
gmYes.onclick = function(){YourPage.toggleChocolate(true);};
gmNo.onclick = function(){YourPage.toggleChocolate(false);};
// Call toggleChocolate once with the initial value
YourPage.toggleChocolate(gmYes.checked);
}
};
}();
window.onload = YourPage.init;
</script>
</body>
</html>
[edited by: Fotiman at 4:13 pm (utc) on Dec. 8, 2006]
