Help with DOM and Forms - changing input values conditionally

[bronzemonkey]

I'm trying to alter the values of inputs in an XHTML form depending on the selections of the user. If the user selects "yes" for then the input fields for the remaining questions remain blank, but if they select "no" I want "N/A" to be automatically written into the input fields for the next questions.

 

The previous way the desired effect was being achieved was by using this code...where "mainform" was the name of the form and the other values were the names of the inputs.

 

<script type="text/javaScript">

function setPrev()

{
if(document.mainform.input1.value=='yes')
{
	document.mainform.input2.value="";
	document.mainform.input3.value="";
	document.mainform.input4.value="";
}
else
{
	document.mainform.input2.value="N/A";
	document.mainform.input3.value="N/A";
	document.mainform.input4.value="N/A";
}
}

</script>

<select name='input1' onchange='setPrev()'>

 

This isn't acceptable because I need the XHTML to validate and the JS to be separate from the document structure. I've been trying to get the JS to work by the form's id (removing the name attribute) and var but with no success.

 

Ideally all the JS needs to be separate from the document structure but I'm new to JS (this is certainly a relatively simple problem) and not having any luck with getting this to work. Any help in this regard would be most welcome! Thanks

[emehrkay]

<select name="input1" id="input1">

//the rest of the select block

 

function fill(){

 

var input_sel = document.getElementById('input1');

input_sel.onchange = function(){

//use ids instead of the way you're referencing the form fields

if(input_sel.value == 'yes'){

document.getElementById('input2').value = 'N/A';

...

}else{

....

}

}

}

 

onload = function(){

fill();

}

[bronzemonkey]

Thanks, this works perfectly with the xhtml I already had...glad to be rid of the old js handed down to me.

 

I've just changed the last part of the script to...

 

window.addEvent('domready', function(){
fill();
});

 

...so that I can use it in my site.js file.

 

Thanks for your help!

[emehrkay]

cool, you're using mootools

 

id rewrite fill as:

 

function fill(){

var input_sel = $('input1');

input_sel.onchange = function(){

//use ids instead of the way you're referencing the form fields

if(input_sel.value == 'yes'){

$('input2').value = 'N/A';

...

}else{

....

}

}

}

 

only a minor change in using the $() function instead of document.getElementById()

[emehrkay]

actually id change it a bit more

 

input_sel.addEvent('change',function(){

//your if statements

});

[bronzemonkey]

input_sel.addEvent('change',function(){

//your if statements

});

 

This didn't work...played around with it and couldn't figure out what the error was. Thanks for the previous suggestion though, I've incorporated it. Below is my current code.

 

function fill(){

var input_sel = $('input1');
input_sel.onchange = function(){

if(input_sel.value == 'no'){
$('input2').value = 'N/A';
$('input3').value = 'N/A';
$('input4').value = 'N/A';
$('input5').value = 'N/A';

}else{
$('input2').value = '';
$('input3').value = '';
$('input4').value = '';
$('input5').value = '';
}
}
}

window.addEvent('domready', function(){
fill();
});

 

Since you know Mootools you might be able to shed some light on another simple question. Can I use "smoothScroll" to smoothly reveal content that is revealed from simple hide/show JS? Right now I have a menu that uses the accordionFX but it always opens at the first part of the menu. I'm looking to achieve the same effect as the accordionFX but without any part of the "accordion" being open by default. Any tips?

 

Thanks again

[emehrkay]

you'd use fx.style(s) to change the style of an object over a period of time

 

http://docs.mootools.net/Effects/Fx-Styles.js

[bronzemonkey]

I found a way to get the accordion to begin will all sections closed, so it's no problem.

 

Thanks for your help, all problems solved now.