totally a newbie... I just want to know how to dynamically disable an input field when the second input field is filled
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 hints will do...
You simply need to give it 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 filled:
var dis1 = document.getElementById("dis_rm");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("dis_per").disabled = true;
}
}
so if the first one is filled, the second one will be disabled
$('#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 to see if it has something inside it. Do this by making sure its length is not zero !=0
if it has something in it, add the attribute disabled and set it to disabled
$('#secondinput').live('blur',function(){
$('#firstinput').attr('disabled', true);
});
tihs works when you filled the second input field and click else where ..........
Just ad this to your 2nd text box:
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);"
http://jsfiddle.net/vbKjx/
Set the disabled flag on the field you want to disable when the OnBlur event fires (for exiting the field) or when the OnChanged event fires (with, of course, validation on the change).
We can ommit some steps, refering to the form as object.
document.form1.num-input2.onchange = function() {
if ( this.value != "" || this.value.length > 0 ) {
document.form1.num-input1.disabled = true;
}
}
I like this answer, using Jquery:
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
I have a search bar that gives search results with every key press, if it returns no results then the user is presented with a form to ask for help. But if they fill out the "ask form" then type in the search bar again it will erase everything they entered in the ask form. So to solve this, I gave all the inputs in the ask form an id of "second div" and the search field id="firstdiv". Now, if they click or tab to one of the input fields of the ask form it will disable to search bar so their data will never be over written.
I will also add a button that will re-enable the search form if they change their mind.
And for the newbies - I put the code in the head of the document like this:
<html>
<head>
<script type="text/javascript">
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
</script>
</head>
<body>
....
