I am beginner to html. I have two text boxes say t1 and t2 If t1 is filled with some data then then other text box t2 should be disable. Please let me know hot to do it. Thanks in advance
A:
You can't achieve this with plain HTML.
Following the guidelines of progressive enhancement, you should first implement a server side check in whatever form handler you are using to process the submitted data.
Then you can consider adding JavaScript for a client side check. Something along the lines of:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disabling form controls</title>
</head>
<body>
<form id="myForm" action="http://example.com/">
<div>
<input name="t1">
<input name="t2">
</div>
</form>
<script type="text/javascript">
(function () {
var t1 = document.forms.myForm.elements.t1;
var t2 = document.forms.myForm.elements.t2;
var handler = function handler() {
t2.disabled = (t1.value !== "");
};
t1.onchange = handler;
}());
</script>
</body>
</html>
(Although I would use a library such as YUI or jQuery to add event handlers in a fashion that is better protected from overwriting in a crossbrowser compatible way).
You might want some tutorials on JavaScript and the DOM so that this makes sense.
David Dorward
2009-05-11 10:46:20
I tested this snippet by creating a form with the id="myForm" in FF3, Chrome and IE8 and it didn't work.
ichiban
2009-05-11 12:15:08
I've updated it with a complete HTML document since you don't seem to be able to comprehend how the script is supposed to work.
David Dorward
2009-05-11 12:16:59
If "Changing the outer function block into José's design pops it to life", then that suggests that either (a) You are failing to put the code I wrote /after/ the form is constructed or (b) You are failing to include the () at the end of the anonymous function that is used to avoid adding variables to the global namespace.
David Dorward
2009-05-11 12:24:29
Your code does not work if the script block appears before the form in the document. If you move it to the head for instance (where I tried it first), it stops working.
Fredrik Mörk
2009-05-11 12:26:33
Yes, I did say "ensure that the script doesn't run before the form exists" in a previous comment. Normally I would use YUI's onAvailable feature, but this example was avoiding the use of libraries. Onload could be used instead, but then the script wouldn't have any effect until the entire page (including images) was loaded - users who were faster then their bandwidth would thus suffer from a form with the logic missing.
David Dorward
2009-05-11 12:50:02
@David; I noticed your intruction in the comment when I had posted my last comment (gave an upvote after those updates; didn't think that the -1 score that your post had was deserved).
Fredrik Mörk
2009-05-11 13:32:11
A:
Here is one way to do it (verified to work in both FF and IE):
<form>
<input type="text" id="firstText" onkeyup="((this.value != '') ? document.getElementById('secondText').setAttribute('disabled','disabled') : document.getElementById('secondText').removeAttribute('disabled'));" />
<input type="text" id="secondText" />
</form>
Fredrik Mörk
2009-05-11 11:04:54
This won't work if data is pasted into the field with the mouse instead of typed.
David Dorward
2009-05-11 11:16:14
True; got stuck on the keys there. I guess I should have put the handler in its own JS function and have moth onkeyup and onchange call it (I am not too fond of that onchange is fired only when you leave the box; I like the more immediate feedback coming from onkeyup; only that it doesn't to well with mouse interaction as you pointed out).
Fredrik Mörk
2009-05-11 12:29:45
+2
A:
Based on your simple scenario description, here's an implementation that works cross-browser and without any third-party javascript library:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t1.onchange = function(){
t2.disabled = t1.value.length > 0;
}
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>
Jose Basilio
2009-05-11 11:58:38
A:
<head>
<script type="text/javascript">
function verify(){
var t1 = document.getElementById ('first');
var t2 = document.getElementById ('second');
if (t1.value != '') {
t2.setAttribute('disabled','disabled');
return true;
}
if (t2.value != '') {
t1.setAttribute('disabled','disabled');
return true;
}
}
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>
Roman
2009-05-11 12:16:46