How to disable html form element with JavaScript?

Question

There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.

This my script:

<html>
   <head>
      <script type="text/javascript">
        function Check()  //this the funciton for diasbled
    {
      var x =document.getElementById("supexp1");
      var y =document.getElementById("supexp2");

      if(x.value != "")
      {
        document.form1.supexp2.disabled=true;
      }
      else if(y.value != "")
      {
        {
        document.form1.supexp1.disabled=true;
      }
      } 
    }

      </script>

   </head>
  <body>
    <form method="POST" action="destination.php" id="form1">
       <select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
           <option >Ekspedisi Local1</option>  //this selection 1 
           <option >Ekspedisi Local2</option>  //this selection 1 
           <option >Ekspedisi Local3</option>  //this selection 1

       </select>
    <select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2
           <option >Ekspedisi Expor2</option>  //this selection 2


    </select>
    </form>
  </body>
 </html>

I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.

Mr. Alien · Accepted Answer · 2012-07-28 05:27:30Z

3

I hope this is what you trying to do based on your description here is a jsfiddle

   $(document).ready(function() {
      $('#supexp1').change(function() {
      $('#supexp2').attr("disabled" , "disabled")
      });
      $('#supexp2').change(function() {
      $('#supexp1').attr("disabled" , "disabled")
      });    
    });

edited Jul 28, 2012 at 5:27

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

answered Jul 28, 2012 at 4:44

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MudMan23 Over a year ago

Thanks For u'r answer, it waork if i dont use the Jquery mobile, in js fiddle, if i Check th jqm, its not work too.

mrsrinivas · Accepted Answer · 2012-07-28 05:06:36Z

2

Try this code

if(x.value != ""){
    document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
    document.getElementById("supexp1").disabled=true;
}

answered Jul 28, 2012 at 5:06

mrsrinivas

35.7k13 gold badges133 silver badges132 bronze badges

Comments

Abhay Kumar · Accepted Answer · 2012-07-28 04:17:26Z

1

I guess to get the value of the selected item you need to use some thing like this

  var e = document.getElementById("supexp1");
  var x = e.options[e.selectedIndex].value;

instead of

  var x =document.getElementById("supexp1");

do the same for Y

answered Jul 28, 2012 at 4:17

Abhay Kumar

1,6181 gold badge20 silver badges46 bronze badges

1 Comment

MudMan23 Over a year ago

it dont work, and mybe I have a mistake how to put it on the scipt?

Collectives™ on Stack Overflow

How to disable html form element with JavaScript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Collectives™ on Stack Overflow

How to disable html form element with JavaScript?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest