Obtaining a Form Elements Index by Name

[curtiss]

I am trying to figure out a way to somehow obtain the index number of a form element by using the form element's name property. Can anyone suggest a way to go about this?

What I am doing is this:
I have a dynamically generated form that has a variable number of elements. If a user changes something within one of the form elements (an onChange event handler), the form re-structures itself, and quite possibly adds a variable number of elements to itself.

I have figured out how to grab the name property of the form element that changed (through the onChange event handler), but I cannot figure out how to grab that form element's index number.

Why I want the index number:
When the page reloads with the new form elements, I want to focus the cursor in the next form element. In other words, let's say I have the following code (saved as testing.php):

<?php extract($_POST); ?>
<form name="my_form" action="./testing.php" method="POST">
<input type="text" name="textbox1" />
<br />
<select name="select1" onChange="document.my_form.submit();">
<option<?php if(empty($select1)) { echo ' selected="selected"'; } ?>>-- Pick One --</option>
<option value="hello"<?php if($select1 == "hello") { echo ' selected="selected"'; } ?>>Hello</option>
<option value="goodbye"<?php if($select1 == "goodbye") { echo ' selected="selected"'; } ?>>Goodbye</option>
</select>
<br />
<?php
if($select1 == "hello") {
echo '<input type="text" name="hello_text1"';
if(isset($hello_text1)) { echo " value=\"$hello_text1\""; }
echo ' />
<br />';
}
?>
<select name="select2" onChange="document.my_form.submit();">
<option<?php if(empty($select2)) { echo ' selected="selected"'; } ?>>-- Pick One --</option>
<option value="test1"<?php if($select2 == "test1") { echo ' selected="selected"'; } ?>>Testing Once</option>
<option value="test2"<?php if($select2 == "test2") { echo ' selected="selected"'; } ?>>Testing Again</option>
</select>
<br />
<?php
if($select2 == "test1") {
echo '<input type="text" name="test1_text"';
if(isset($test1_text)) { echo " value=\"$test1_text\""; }
echo ' />
<br />';
}
elseif ($select2 == "test2") {
echo '<select name="test2_select1">
<option';
if(empty($test2_select1)) { echo ' selected="selected"'; }
echo '>-- Pick One --</option>
<option value="test2_option1"';
if($test2_select1 == "test2_option1") { echo ' selected="selected"'; }
echo '>Testing Again Option 1</option>
<option value="test2_option2"';
if($test2_select1 == "test2_option2") { echo ' selected="selected"'; }
echo '>Testing Again Option 2</option>
</select>
<br />';
}
?>
<input type="submit" value="Submit This Form" />
</form>

Obviously, when you first load the page, the form will only have four elements (including the submit button). However, as you change the values of specific elements, the total number of form elements will change, meaning that the index number of those form elements will change.

If I want to advance the focus to the next element in the form after the page reloads, I am assuming that I will need to find the index number of the form element that the user changed before the page reloaded, then add 1 to that index number, and place the focus there.

So, as I said, here is my question:

Using javascript, if I have the name of a form element, can I somehow obtain the index number of that form element?

[Deadeye]

assuming you know the name of the element you can use this:

var objAppSelectBox = document.getElementById("app_select");

[curtiss]

Thanks for the info. I may end up needing that in the future. I had forgot about that command.

I figured out, though, that I was making things too difficult on myself. I will never be adding elements above the element that the user just changed, which means all I needed to do was grab the index number of the element the user just changed, and add 1 to it when the page reloads.

Now, onto another problem I am facing:
I would like to disable all of the form elements when a user changes something, so that they won't try to change anything else before the page reloads. I figured out an easy way to disable all of the form elements, but that makes them lose their value, so it resets my form. Is there a way to make it so that the user can't get into a form element to change it, without losing the value of that form element? I have thought about creating a variable number of hidden fields to match up with my form elements, and storing the values in there, but that seems like an awful lot of work just to try to keep someone from changing one or two things.

In other words, here is my problem (remember, I am dealing with end-users that know very, very little about computers or the web):
I have a date picker set up on the form. The user chooses the month first. When the user chooses a month, the form reloads to populate the "day" portion of the form with the right number of days (I realize that this part of it could be done with javascript, but there are a lot of other form elements that couldn't be done that way, so just work with me here. ).
Most of my users pick the month, tab over and start trying to change the day before the form properly submits itself to reload the page. Then, when the page reloads, they wonder why the day they picked got reset to the default value.
It would be nice to somehow disable the form (grey it out) so that they can't even attempt to change the "day" until the form has reloaded.

[Deadeye]

try this

document.form1.myinput.disabled=true;

--or--

document.form1.myinput.readOnly=true;