Using javascript to write additional form elements based on user input

Say I have a form that asks for a name and favorite color. There is a third elemet that asks for favorite food, but it is disabled (greyed out). Pretty basic html so far.

Now, add to the form a checkbox beside the name field. If a user clicks this checkbox the greyed out element becomes active.

Before the checkbox is selected the form looks like this:




If the checkbox is selected the form looks like this:




The user can select and unselect the checkbox and the food input text box will select/deselect with each subsequent click.

I've done something vaguely similar - but only to change a value in an existing textbox, not to change an option for a text box.

Can this be done?

This sort of works, but it rewrites the entire page...



<form>
Enter: <input type="text" value="hello" name=test>

<SCRIPT LANGUAGE="JavaScript">
<!--

var count = 1;
var text = "disabled";

function changeit() {
count = count +1;
if (count%2 == 0) {
var text = "disabled";
document.write("<INPUT NAME='test' TYPE='text' SIZE='15' " + text + " value='test'>");
} else {
var text = "";
document.write("<INPUT NAME='test' TYPE='text' SIZE='15' " + text + " value='test'>");
}
}

//-->
</script>

<input type="checkbox" name=check value="yes" onclick="javascript: changeit();" >

</form>

Hey there

You can toggle the disabled property of that Food text box depending on the clicked state of the checkbox like this:

<script>
function food(){
if(document.formname.checkboxname.checked){
document.formname.textboxname.disabled=false
}
else{
document.formname.textboxname.disabled=true
}
}
</script>

Then, you can call the food() function onclick from the checkbox:

<input type=checkbox name=addelement value=yes onclick="food()">

Note that you'll need to give the form a name so that you can reference the textbox & checkbox.

Thanks Mike, it works like a charm.

Great!

Hmm....

I thought of something else that I'd like to consider doing with this.

Disabling the text box is not visably apparent to the average point & click user -- I'm thinking it would be a good idea to change the background color of the box to grey when the text boxes are deselected.

Using... style="background:gray" ...would do the trick but again we have the problem of writing the info to the element on the fly. In my first try (above), using document.write wrote the modified form element in a new window.

I wonder if there is another way to modify element properties on the fly, without reloading the entire page?

Sure is

You can change form element styles dynamically through javascript like this:

e.g. 1

document.formname.textname.style.backgroundColor="red"

e.g. 2

document.formname.textname.style.textDecoration="underline"

Cool, I just was looking at the innerHTML tag. That seems to be a different way of doing the same thing - but your javascript example looks cleaner to me.

Thanks again,
- Mike