...

View Full Version : Multiple text field disabling and enabling.



tophi7
01-30-2007, 07:21 PM
Task:
I have 4 text fields within a form: fullName, givenName, surname, and AKA. These fields need to be disabled/enabled accordingly:

When users enter data into the fullName text field, the givenName, surname, and AKA text fields should become disabled-clearing out any text.

When users enter data into either the givenName, surname, or AKA text fields the fullName text field should become disabled-clearing out any text.

When text from any of the text fields is cleared out, all fields should become available/enabled again on the fly.

I've come across the following code that performs almost exactly what I need to accomplish, however it will disable any of the fields that does not have data. And I need to tie the givenName, surname, and AKA to the fullName.

Can anyone figure this one out?



var flg = false;
function chk() {
var field = document.getElementById( "QueryForm" );
if (field.fullName.value.length==0&&
field.givenName.value.length==0&&
field.surname.value.length==0&&
field.indAKA.value.length==0) {
flg=false;
}
}




function disablefield(which) {
chk();
if (flg&&which.value.length==0) {
which.blur();
} else {
flg = true;
}
}




<td><html:text property="fullName" styleId="fullName" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
<td><html:text property="givenName" styleId="givenName" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
<td><html:text property="surname" styleId="surname" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>
<td><html:text property="indAKA" styleId="indAKA" styleClass="inputNormal" size="20" onfocus="disablef(this);" /></td>

vwphillips
01-31-2007, 12:22 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function zxcCkInputs(zxcobj){
var zxcips=zxcobj.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<zxcips.length;zxc0++){
zxcips[zxc0].removeAttribute('disabled');
if (zxcips[0].value.length>0&&zxc0>0){
zxcips[zxc0].value='';
zxcips[zxc0].setAttribute('disabled','disabled');
}
else if (zxcips[zxc0].value.length>0&&zxc0>0){
zxcips[0].value='';
zxcips[0].setAttribute('disabled','disabled');
break;
}
}
}
//-->
</script></head>

<body>
<div onmouseout="zxcCkInputs(this);" >
fullname <input name="fullname" ><br>
givenName <input name="givenName" >
surName <input name="surName" >
AKA <input name="AKA" >
</div>
</body>

</html>

tophi7
01-31-2007, 02:44 AM
Thanks so much for your help Vic. Your function to loop through each of the fields is quite efficient unlike the code I presented. Works like a charm. Your a javascript Genius - :thumbsup:

Thanks again for your help.

tophi7
01-31-2007, 06:36 PM
Performed some more testing, and found a small issue that involves the ability to tab and paste text between all text fields-which seems to be a loop hole within the disabling method. Any ideas around this issue?

vwphillips
01-31-2007, 06:57 PM
just done a quick test

and pasting into first and another textfield gives priority to field 1 and clears/disables the other text fields on mouse out of the parent.

This is what I would expect.

Any event call to the funtion will give priority to the first text box if it has a value length and clear/disable the others.

can you post the code or link, so I can see the problem you discribe.

tophi7
01-31-2007, 07:07 PM
Thanks for responding so quickly. Code is all pretty much as you have written. When testing, I essentially paste some text into the Full Name text field (all the while never touching or moving the mouse), and then TAB over to the other fields, then paste text into any of the Given Name, Surname, and/or AKA text fields and press the Enter key (all the while never touching or moving the mouse). At this point none of the text fields are disabled because I never performed a mouseout. Pressing the Enter key will initiate my desired action (which is essentially a query or search for that particular text field). Any ideas? Thanks again for your help.

tophi7
01-31-2007, 07:23 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ckInputs(fieldObj) {
var txtFld=fieldObj.getElementsByTagName('INPUT');
for (var i=0;i<txtFld.length;i++) {
txtFld[i].removeAttribute('disabled');
if (txtFld[0].value.length>0&&i>0) {
txtFld[i].value='';
txtFld[i].setAttribute('disabled','disabled');
} else if (txtFld[i].value.length>0&&i>0) {
txtFld[0].value='';
txtFld[0].setAttribute('disabled','disabled');
break;
}
}
}
</script>

</head>

<body>

<div onmouseout="ckInputs(this);" >
<table cellpadding="0" cellspacing="0">
<col width="180" span="3" />
<tbody class="bgColor-Light-Bold">
<tr>
<td>Name</td>
<td>Given Name</td>
<td>Surname</td>
<td>AKA</td>
</tr>
<tr>
<td><input name="fullName" ></td>
<td><input name="givenName" ></td>
<td><input name="surname" ></td>
<td><input name="indAKA" ></td>
</tr>
</tbody>
</table>
</div>

</body>

</html>

vwphillips
01-31-2007, 08:31 PM
he Enter key will initiate my

that is call a function?

then before calling the function or at the start of the function
call ckInputs(fieldObj);

this requires that the DIV is given an ID and use document.getElementById
of refer to one of the textboxes(objs). obj.parentNode

vwphillips
01-31-2007, 08:43 PM
or addit line to accept the DIV object or ID

edit main difference is the addition of the on focus ip events(belt and braces)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function zxcCkInputs(zxcobj){
if (typeof(obj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcips=zxcobj.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<zxcips.length;zxc0++){
zxcips[zxc0].removeAttribute('disabled');
if (zxcips[0].value.length>0&&zxc0>0){
zxcips[zxc0].value='';
zxcips[zxc0].setAttribute('disabled','disabled');
}
else if (zxcips[zxc0].value.length>0&&zxc0>0){
zxcips[0].value='';
zxcips[0].setAttribute('disabled','disabled');
break;
}
}
}
//-->
</script></head>

<body>
<div id="Tst1" onmouseout="zxcCkInputs(this);" >
fullname <input name="fullname" onfocus="zxcCkInputs(this.parentNode)" ><br>
givenName <input name="givenName" onfocus="zxcCkInputs(this.parentNode)" >
surName <input name="surName" onfocus="zxcCkInputs(this.parentNode)" >
AKA <input name="AKA" onfocus="zxcCkInputs('Tst1')" >
</div>
</body>

</html>

tophi7
02-01-2007, 02:50 AM
Here is my current code that recieves the javascript error as described below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ckInputs(fieldObj) {
if (typeof(obj)=='string') { fieldObj=document.getElementById(fieldObj); }
var txtFld=fieldObj.getElementsByTagName('INPUT');
for (var i=0;i<txtFld.length;i++) {
txtFld[i].removeAttribute('disabled');
if (txtFld[0].value.length>0&&i>0) {
txtFld[i].value='';
txtFld[i].setAttribute('disabled','disabled');
} else if (txtFld[i].value.length>0&&i>0) {
txtFld[0].value='';
txtFld[0].setAttribute('disabled','disabled');
break;
}
}
}
</script>

</head>

<body>

<div id="Tst1" onmouseout="ckInputs(this);" >
<table cellpadding="0" cellspacing="0">
<col width="180" span="3" />
<tbody class="bgColor-Light-Bold">
<tr>
<td>Name</td>
<td>Given Name</td>
<td>Surname</td>
<td>AKA</td>
</tr>
<tr>
<td><input name="fullName" onfocus="ckInputs(this.parentNode)" ></td>
<td><input name="givenName" onfocus="ckInputs(this.parentNode)" ></td>
<td><input name="surname" onfocus="ckInputs(this.parentNode)" ></td>
<td><input name="indAKA" onfocus="ckInputs('Tst1')" ></td>
</tr>
</tbody>
</table>
</div>

</body>

</html>


I am receiving a javascript error when attempting to TAB and paste data into supposed disabled multiple text fields (without using the mouse), once I reach the last field (AKA) I receive the following error:
"fieldObj.getElementsByTagName is not a function" Line: 12.

I guess I am not following your logic in regards to the additional added code from your earlier post. Could you please elaborate. Sorry, just not following. Again thanks for all your help. I am just getting frustrated with something that just seems rather simple to accomplish. :confused:

vwphillips
02-01-2007, 09:46 AM
couple of things

where the mouseout node is not the direct parent of the input the ID must be used

In your application you could use the TR of the input table row as this is the first common parent in the DOM tree

also you had a typo in the typeof parameter.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ckInputs(fieldObj) {
if (typeof(fieldObj)=='string') { fieldObj=document.getElementById(fieldObj); }
var txtFld=fieldObj.getElementsByTagName('INPUT');
for (var i=0;i<txtFld.length;i++) {
txtFld[i].removeAttribute('disabled');
if (txtFld[0].value.length>0&&i>0) {
txtFld[i].value='';
txtFld[i].setAttribute('disabled','disabled');
}
else if (txtFld[i].value.length>0&&i>0) {
txtFld[0].value='';
txtFld[0].setAttribute('disabled','disabled');
break;
}
}
}
</script>

</head>

<body>

<div id="Tst1" onmouseout="ckInputs(this);" >
<table cellpadding="0" cellspacing="0">
<col width="180" span="3" />
<tbody class="bgColor-Light-Bold">
<tr>
<td>Name</td>
<td>Given Name</td>
<td>Surname</td>
<td>AKA</td>
</tr>
<tr>
<td><input name="fullName" onfocus="ckInputs(Tst1)" ></td>
<td><input name="givenName" onfocus="ckInputs(Tst1)" ></td>
<td><input name="surname" onfocus="ckInputs(Tst1)" ></td>
<td><input name="indAKA" onfocus="ckInputs('Tst1')" ></td>
</tr>
</tbody>
</table>
</div>

</body>

</html>

tophi7
02-01-2007, 12:44 PM
Your code tweak is perfect, you really know your stuff. Again all my thanks for directing me through this issue. I now have a better understanding of using the DOM with javascript. I can only hope to be as knowledgeable as you someday. I better keep reading up and getting more experience. Again much thanks to you. :thumbsup:

tophi7
02-02-2007, 07:26 PM
Just changed the onfocus event with onkeyup - works great.

Enhancement:



<td><input name="fullName" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="givenName" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="surname" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="indAKA" onkeyup="ckInputs('Tst1')" ></td>


Full Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function ckInputs(fieldObj) {
if (typeof(fieldObj)=='string') { fieldObj=document.getElementById(fieldObj); }
var txtFld=fieldObj.getElementsByTagName('INPUT');
for (var i=0;i<txtFld.length;i++) {
txtFld[i].removeAttribute('disabled');
if (txtFld[0].value.length>0&&i>0) {
txtFld[i].value='';
txtFld[i].setAttribute('disabled','disabled');
}
else if (txtFld[i].value.length>0&&i>0) {
txtFld[0].value='';
txtFld[0].setAttribute('disabled','disabled');
break;
}
}
}
</script>

</head>

<body>

<div id="Tst1" onmouseout="ckInputs(this);" >
<table cellpadding="0" cellspacing="0">
<col width="180" span="3" />
<tbody class="bgColor-Light-Bold">
<tr>
<td>Name</td>
<td>Given Name</td>
<td>Surname</td>
<td>AKA</td>
</tr>
<tr>
<td><input name="fullName" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="givenName" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="surname" onkeyup="ckInputs('Tst1')" ></td>
<td><input name="indAKA" onkeyup="ckInputs('Tst1')" ></td>
</tr>
</tbody>
</table>
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum