js not working. on select disable other fields

jasonc310771 · 03-15-2009, 09:44 PM

i have found the following code and altered it to disable certain fields in my form.

but it does not swap the fields around from disabled to enabled and visa versa.

what am i doing wrong?

the following javascript code is in a file and i use the <link... > method within the <head> tags to include this script

Code:

function txtDisable( theForm ){
        cBox = theForm.NAME;

        if( cBox.options[cBox.selectedIndex].value == "st" )
		theForm.INP1.disabled = true;
		theForm.INP1.value = "";

		theForm.INP2.disabled = false;
		theForm.INP2.value = "";
        else
		theForm.INP1.disabled = false;
		theForm.INP1.value = "";

		theForm.INP2.disabled = true;
		theForm.INP2.value = "";
}

Code:

<form action="" method="post" enctype="multipart/form-data" name="edit">
<select name="NAME" onChange="txtDisable( this.form );">
<option value="SELECT AN OPTION">SELECT AN OPTION</option>
<option value="st">NOT READY YET</option>
</select>
<input name="INP1" type="text" size="50">
<input name="INP2" type="text" size="50" disabled>
</form>

Philip M · 03-15-2009, 10:15 PM

Main problem is missing braces {}. And although NAME is upper case, it is best to avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'text' or 'checked' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

Code:

<script type = "text/javascript">

function txtDisable( theForm ) {
cBox = theForm.selname.value;
if( cBox == "st" ) {
theForm.INP1.disabled = true;
theForm.INP1.value = "";
theForm.INP2.disabled = false;
theForm.INP2.value = "";
}

else {
theForm.INP1.disabled = false;
theForm.INP1.value = "";
theForm.INP2.disabled = true;
theForm.INP2.value = "";
}
}

</script>

<form name="edit" action="" method="post" enctype="multipart/form-data" >

<select name="selname" onChange="txtDisable( this.form );">
<option value="SELECT AN OPTION">SELECT AN OPTION</option>
<option value="st">NOT READY YET</option>
</select>

<input name="INP1" type="text" size="50">
<input name="INP2" type="text" size="50" disabled>
</form>

When trouble arises and things look bad, there is always one individual who perceives a solution and is willing to take command. Very often, that individual is crazy.

jasonc310771 · 03-15-2009, 11:26 PM

great that done the job.

but just one thing how do i get the page to show the options disabled that need to be on first load.

jasonc310771 · 03-15-2009, 11:46 PM

just thought, also i need to make sure it does not clear the fields if someone has tried to enter something but did not fill out the form correctly as it will come back to the same page and place all the existing data back in to the fields that were filled out.

also i have thought about how the page would work and think i should be putting something at the end of the page as the form does not exist if i was to place the reset script at the top, but having said that i still need to make sure that the form is not reset if some of the fields were filled out.

this would be the parts that need resetting...

theForm.INP1.disabled = false;
theForm.INP1.value = "";
theForm.INP2.disabled = true;
theForm.INP2.value = "";

but how do i get it to do this on the form named 'myform'

jasonc310771 · 03-16-2009, 12:20 AM

i thought this may work but does not seem to disable to fields that need to be disabled, field3, field4 and field5

Code:

<script type="text/javascript"><!--
if (document.edit.Submit.value!="SAVE CHANGES") {
document.edit.field1.disabled = false;
document.edit.field2.disabled = false;
document.edit.field3.disabled = true; theForm.field3.value = "";
document.edit.field4.disabled = true; theForm.field4.value = "";
document.edit.field5.disabled = true; theForm.field5.value = "";
}
--></script>

jmrker · 03-16-2009, 04:16 AM

Quote:

also i have thought about how the page would work and think i should be putting something at the end of the page as the form does not exist if i was to place the reset script at the top, but having said that i still need to make sure that the form is not reset if some of the fields were filled out.

Try changing this:

Code:

<form name="edit" action="" method="post" enctype="multipart/form-data"
 onsubmit="return false">

while you are testing the rest of the script

Philip M · 03-16-2009, 08:33 AM

Quote:

Originally Posted by jasonc310771

i thought this may work but does not seem to disable to fields that need to be disabled, field3, field4 and field5

Code:

<script type="text/javascript"><!--
if (document.edit.Submit.value!="SAVE CHANGES") {
document.edit.field1.disabled = false;
document.edit.field2.disabled = false;
document.edit.field3.disabled = true; theForm.field3.value = "";
document.edit.field4.disabled = true; theForm.field4.value = "";
document.edit.field5.disabled = true; theForm.field5.value = "";
}
--></script>

Because you have disabled the field before you try to change its value, so as it is disabled nothing happens.

theForm.field3.value = ""; theForm.field3.disabled = true;
theForm.field4.value = ""; theForm.field4.disabled = true;
theForm.field5.value = ""; theForm.field5.disabled = true;