...

View Full Version : form inputField value



gregd101
05-16-2012, 07:37 PM
OK, I am a newbe

I am backfilling for a coworker.
They are auto generating a page pulling from a database.

It is creating something like this:


<td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[1]' checked><b> Data Cabinet - 7ft - 0113</td></tr>
<td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[2]' checked><b> Data Cabinet - 5ft -0463</td></tr>
<td colspan='2' class='normal' nowrap><input type='checkbox' name='Network/Other Equipment[3]' > Router</td></tr>




I am trying to pull the values out.
I have been trying




<tr><td><input type='button' class='button' name='Calculate' value='Calculate' onclick="testIt(this.form)"></td></tr>








<script language='javascript'>
function testIt(formname)
{
alert(frm.Satellite Equipment[1].value);
}
</script>



Not working.
How can I grab the value from something like this:
name='Network/Other Equipment[1]'
?

Also,
Are the checkboxes automatically put into an array?

thanks

WolfShade
05-16-2012, 08:10 PM
If the checkboxes have the same ID, yes, they are put into an array (well, an object that can be treated like an array, anyway.)

In your JavaScript example code, you do not declare what "frm" is.


<script language='javascript'>
function testIt(formname)
{
var frm = formname.id;
alert(frm.Satellite Equipment[1].value);// The "array" is zero-index, so the first value is index 0, not index 1.
// ALSO: You cannot have spaces in object IDs. And, just for the record, the id MUST begin with a letter or underscore - it cannot start with a number or special character.
}
</script>

gregd101
05-16-2012, 08:48 PM
Thanks for the help.

I have been playing with a simpler example.
On this,
testIt2 works. But testIt3 does not work.

I am interested in knowing why testIt3 does not work. Or how to make it work.



Could you also explain
"the id MUST begin with a letter or underscore - it cannot start with a number or special character."
A bit more. I am not sure I understand.

thanks






<html>

<head>


<script type="text/javascript">
function testIt2(){
var myTextField = document.getElementById('myText[2]');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
else
alert("Would you please enter some text?")
}
</script>


<script type="text/javascript">
function testIt3(formname)
{
alert(formname.myText[1].value);
}
</script>

</head>
<body>


<input type='text' id='myText[1]' />
<input type='text' id='myText[2]' />
<input type='button' onclick='testIt2()' value='testIt2' />
<input type='button' onclick='testIt3(this.form)' value='testIt3' />


</body>
</html>

WolfShade
05-16-2012, 11:19 PM
I have been playing with a simpler example.
On this,
testIt2 works. But testIt3 does not work.

I am interested in knowing why testIt3 does not work. Or how to make it work.
The two functions are completely different. The testIt3 doesn't work because you are submitting the form itself as an argument, but don't get the id of the form, so the function does not know what to do.


<script type="text/javascript">
function testIt2(){
var myTextField = document.getElementById('myText[2]');
if(myTextField.value != "")
alert("You entered: " + myTextField.value)
else
alert("Would you please enter some text?")
}

function testIt3(formname)
{
thisForm = formname.id;
alert(document.forms[thisForm].myText[1].value);
}
</script>


Could you also explain
"the id MUST begin with a letter or underscore - it cannot start with a number or special character."
A bit more. I am not sure I understand.

ALL object IDs must begin with a letter or underscore (a-z or _) and cannot begin with a number (0-9) or special character OTHER THAN underscore (!@#$%^&*()-~` etc). Examples:
id="thisForm" is valid
id="beginWithAnyLetter" is valid
id="AtoZorUnderscore" is valid
id="_beginsWithUnderscore" is valid

id="1_form" is NOT valid
id="1st_input" is NOT valid
id="99_luftballoons" is NOT valid
id="#thisIsAHash" is NOT valid
id="^thisIsACarat" is NOT valid
id="<>thisWontWork<>" is NOT valid (you can't use < or > as part of the id)

Old Pedant
05-16-2012, 11:21 PM
If the checkboxes have the same ID, yes, they are put into an array (well, an object that can be treated like an array, anyway.)


OOPS! NOT TRUE! The id's are ignored!

They must have the same names.

Old Pedant
05-16-2012, 11:38 PM
The two functions are completely different. The testIt3 doesn't work because you are submitting the form itself as an argument, but don't get the id of the form, so the function does not know what to do.


Not true.

The problem is that he DOES NOT HAVE any <form>!!!

You can't use

<input type='button' onclick='testIt3(this.form)' value='testIt3' />
unless there *IS* a <form>...</form> that INCLUDES the form element in question.

If we change the HTML to

<body>
<form id="anyID">
<input type='text' id='myText[1]' />
<input type='text' id='myText[2]' />
<input type='button' onclick='testIt2()' value='testIt2' />
<input type='button' onclick='testIt3(this.form)' value='testIt3' />
</form>
</body>

Then testIt3 AS GIVEN in Greg's second post is correctly referencing the form.

When you pass this.form you are ALREADY passing a reference to the form.

It would be better to change the function to just


function testIt3(form)
to emphasize this fact.

But the original code and Wolfshade's version of testIt3 will never work, at all.

(1) Wolfshade uses thisForm = formname.id; to get the ID of the form but then tries to get a reference to the form using document.forms[thisForm], but you can only get a form BY NAME (not by id!) using that code.

(2) Wolfshade tries to access the form field using formreference.myText[1] (here just using "formreference" since his code for a form reference won't work).
That would only work if you had two fields with the names of myText. Thus:


<form>
<input name="myText"/>
<input name="myText"/>
</form>


The real problem is that, as Wolfshade correctly noted, the ids of those <input>s is illegal.

You can't have [1] or [2] in an ID.

You *CAN* have them in a name.

Which you might well do if you are using PHP as your server side language.

In which case you COULD do this:


<body>
<form id="anyID" name="namedFormsAreObsolete">
<input type='text' name='myText[1]' />
<input type='text' name='myText[2]' />
<input type='button' onclick='testIt3(this.form)' value='testIt3' />
</form>
</body>

and then this:


function testIt3(form)
{
alert( form["myText[1]"].value );
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum