Geek Answers Handbook

Disable the input field if the second input field is filled

completely newbie ... I just want to know how to dynamically disable the input field when filling out the second input field

eg:

<td><input type="text" name="num-input1" id="dis_rm" value=""></input></td> <td><input type="text" name="num-input2" id="dis_per" value="" ></input></td>

pls ... any links and tips will do ...

+8
javascript jquery ajax forms
source share
7 answers

You just need to provide it with a disabled property:

 document.getElementById("dis_rm").disabled = true; document.getElementById("dis_per").disabled = true;

you can use the on change event to see if one of them is full:

 var dis1 = document.getElementById("dis_rm"); dis1.onchange = function () { if (this.value != "" || this.value.length > 0) { document.getElementById("dis_per").disabled = true; } }

therefore, if the first is full, the second will be disabled.

+9
source share
 $('#dis_per').blur(function(){ if($(this).val().length != 0){ $('#dis_rm').attr('disabled', 'disabled'); } });

http://jsfiddle.net/jasongennaro/D7p6U/

Explanation:

  • when the second input loses focus ... .blur()

  • check if he has something inside. Do this by making sure its length is not zero !=0

  • if it has something, add attribute disabled and set it to disabled

+2
source share
 $('#secondinput').live('blur',function(){ $('#firstinput').attr('disabled', true); });

tihs works when you fill in the second input field and click else, where ..........

+1
source share

Set the disabled flag to the field that you want to disable when the OnBlur event OnBlur (to exit the field) or when the OnChanged event OnChanged (taking into account, of course, checking for changes).

0
source share

Just put this in your second text box:

 onblur="document.getElementById('dis_rm').disabled = (''!=this.value);"

http://jsfiddle.net/vbKjx/

0
source share

We can omit some steps, referring to the form as an object.

 document.form1.num-input2.onchange = function() { if ( this.value != "" || this.value.length > 0 ) { document.form1.num-input1.disabled = true; } }
0
source share

I like this answer using jQuery:

 $('#seconddiv').live('focus',function(){ $('#firstdiv').attr('disabled', true); });

I have a search panel that gives the search results each time a key is pressed, if it does not return any results, then the user is presented with a form to ask for help. But if they fill out the "request form", then enter the search line again, and it will delete everything that they entered in the request form. Therefore, to solve this problem, I gave all the input in the form of a request id "second div" and a search field id = "firstdiv". Now, if they click or go to one of the input fields of the request form, it will turn off in the search bar so that their data will never be written.

I will also add a button that will turn on the search form again if they change their mind.

And for beginners - I put the code at the beginning of the document as follows:

 <html> <head> <script type="text/javascript"> $('#seconddiv').live('focus',function(){ $('#firstdiv').attr('disabled', true); }); </script> </head> <body> ....
0
source share

More articles:


All Articles