PDA

Click to See Complete Forum and Search --> : JavaScript document-targeting using variables in a function

Sylvan012
04-24-2007, 10:51 AM
I'm running into the limits of my knowledge.

What I'm trying to do is build a JavaScript function which can accept the name of a <form> and the name of an <input> field as well as the contents of that field and, then, depending on various factors, re-focus the user onto that text field.

The problem is in targeting.

Normally, you just use something like this:

document.formName.fieldName.focus()

However, since I'm passing this data into the function with an onBlur event handler (and storing the data in the function as string variables), I'm not able to target correctly. The page may have many forms on it and the page may have many fields on it. I do not always have control over the name of either. Therefore, I'm using onBlur="javascriptFunctionName(String(this.value),String(this.name),String(this.form.name))" to send the value, <INPUT> field name, and <FORM> name to the function where they are being stored as variables, respectively, : function javascriptFunctionName(elementValue,inputFieldName,inputFormName).

Later on, I use the following, which does not work:

document.form[inputFormName].input[inputFieldName].focus();

I have tried variants:

document.form(inputFormName).input(inputFieldName).focus();

and

document.inputFormName.inputFieldName.focus();

Any idea how to target something using the contents of a variable passed into a function? I'm feeling REALLY stupid right about now...

Yours,
Dave (Sylvan)
gil davis
04-24-2007, 11:20 AM
The direct answer to your question is:document.forms[formNameVar][formFieldNameVar].value = valueVar;However, if you use the "this" operator in the onblur event, you can save yourself a lot of grief.<script type="text/javascript">
function handleForm(frmfld) {
// whatever processing
txt = frmfld.value; // this gets the user input
frmfid.focus(); // this places focus back to the field
frmfld.form.submit(); // this will submit the form
}
...
</script>
...
<form ...>
<input ... onblur="handleForm(this)">
</form>
Using "this" allows you to reuse the function regardless of the form and element.
Sylvan012
04-24-2007, 11:24 AM
Using "this" allows you to reuse the function regardless of the form and element.

I've tried that.

Here's my full code so you can see:

<html>
<head>

<script type="text/javascript">
function banIllegalCharacters(myElement) {
var inputFieldName = myElement.name;
var elementValue = myElement.value;
var inputFormName = myElement.form.name;
var illegalCharArray = new Array("(",")","-","_","=","+","'","\"",":",";","<",">",",","*","-","#");
var foundIllegalCharacters = new Array();
var counter = 0;
var errorString = "";

for (i=0;i < illegalCharArray.length; i++) {
if (elementValue.indexOf(illegalCharArray[i]) != -1){
// Illegal character found - add illegal character to array
foundIllegalCharacters[counter] = illegalCharArray[i];
counter++;
}
}
if (counter > 0) {
// Illegal characters are present - build an alert string to notify user
for (i=0;i < foundIllegalCharacters.length; i++) {
if (errorString.indexOf(foundIllegalCharacters[i]) == -1) {
errorString = errorString + foundIllegalCharacters[i] + " ";
}
}
alert("You cannot use the following characters when placing your order:\n\n\t" + errorString + "\n\nPlease re-enter your information.");
myElement.focus();
}
}
</script>

</head>
<body>

<form name="CheckoutPaymentForm">
<input type="text" name="field1" onBlur="banIllegalCharacters(this)" />
<input type="text" name="field2" onBlur="banIllegalCharacters(this)" />
<input type="text" name="field3" onBlur="banIllegalCharacters(this)" />
</form>

</body>
</html>

As you can see, I'm using "myElement.focus();" in the function but, for some reason, the second INPUT field is being targeted.
gil davis
04-24-2007, 11:56 AM
Works fine for me. IE 6 on XP SP2.
Sylvan012
04-24-2007, 11:58 AM
Works fine for me. IE 6 on XP SP2.
<nods> Just not on FireFox...

Wow!

Something that FireFox does wrong that IE does right?!!

What're the odds?!! ;)

Thank you...

I'll try to find another work-around that doesn't require me focusing on the offending <INPUT> field...
gil davis
04-24-2007, 12:44 PM
I use this technique all the time at work, and it functions in FF. Did you check the javascript console for errors?