Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    js not working. on select disable other fields

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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'

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    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

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jasonc310771 View Post
    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;


  •  

    Posting Permissions

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