I'm wondering if (and how) it's possible to write a script that returns the index number of a text box or hidden form element. The select object has a selectIndex property, which is exactly the type of property I would like to use in conjunction with a text or hidden form element. Is this possible?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
return form element index number
- Thread starter sarak
- Start date
I believe you can do what you want. But let's lay it out clear.
Do you want to have a hidden input field's value be the selectedIndex of select input field? Gary Haran
Do you want to have a hidden input field's value be the selectedIndex of select input field? Gary Haran
- Thread starter
- #3
My dynamically generated web page contains a form. The number of form fields will depend on a number of variables (server side scripting, user input) and so I have no way of knowing how many fields my form contains. I would like to attach some script to a button that manipulates the text fields immediately before and immediately after it. (I'm thinking now there's no need for a hidden field).
Anyway, If I'm able to determine the button's index number, I can write my script to then determine the index number of the text fields I'd like to affect since their index numbers will be one less than and one greater than the button's index number.
Unfortunately it's not possible for me to name the fields or buttons so I will need to rely on the script attached to the button to determine its button's index number when the web page is generated. (There will be multiple instances of this button in the form.)
Please let me know if you need clarification--I appreciate your help!
Anyway, If I'm able to determine the button's index number, I can write my script to then determine the index number of the text fields I'd like to affect since their index numbers will be one less than and one greater than the button's index number.
Unfortunately it's not possible for me to name the fields or buttons so I will need to rely on the script attached to the button to determine its button's index number when the web page is generated. (There will be multiple instances of this button in the form.)
Please let me know if you need clarification--I appreciate your help!
I'm think I am getting the jist of it. I would try to see if I can't get information on how many elements are in my form based on the server side first. If that is impossible for x reason then maybe this can help.
document.formName.elements is a collection of all elements inside the form with the specified name.
You can loop through all elements inside a form that way.
function clickedElm(element)
{
var index = 0;
for (var i = 0; document.forms[0].elements.length; i++)
{
if (document.forms[0].elements == element)
{
index = i;
}
}
// do more stuff here
}
<input type=button onclick="clickedElm(this)">
Is this helpful at all?
I do think however that a different design approach might simplify your task.
Hope you get some help with this. Gary Haran
document.formName.elements is a collection of all elements inside the form with the specified name.
You can loop through all elements inside a form that way.
function clickedElm(element)
{
var index = 0;
for (var i = 0; document.forms[0].elements.length; i++)
{
if (document.forms[0].elements == element)
{
index = i;
}
}
// do more stuff here
}
<input type=button onclick="clickedElm(this)">
Is this helpful at all?
I do think however that a different design approach might simplify your task.
Hope you get some help with this. Gary Haran
- Thread starter
- #5
Yes--definitely helpful! Thanks!! I thought I'd post where I've ended up, in case anyone is curious:
Function:
Which works this form on the page:
Function:
Code:
function clickedElm(element)
{
var index = 0;
// I ran into trouble using an equal sign in the condition statement of the for loop so rather than trace the infinite loop problem, I took the easy way out and created a variable, cycle, and set it to 1 greater than the form element array so I could use the less than sign
var lenAnd1 = document.forms[0].elements.length + 1;
for (var i = 1; i < lenAnd1; i++)
{
if (document.forms[0].elements[i] == element)
{
index = i;
}
}
//switch the text fields
text1 = index -2;
text2 = index +1;
a = document.forms[0].elements[text1].value;
b = document.forms[0].elements[text2].value;
document.forms[0].elements[text1].value = b;
document.forms[0].elements[text2].value = a;
//switch the select elements
select1 = index -1;
select2 = index +2;
sv1 = document.forms[0].elements[select1].selectedIndex;
sv2 = document.forms[0].elements[select2].selectedIndex;
document.forms[0].elements[select1].selectedIndex = sv2;
document.forms[0].elements[select2].selectedIndex = sv1;
}Which works this form on the page:
Code:
<form action="#" method="get">
<table border=1>
<tr>
<td><input type="text" name="field1" size="24" border="0"></td>
<td><select name="select1" size="1">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</td>
</tr>
<tr>
<td><input type="button" onclick="clickedElm(this);" value="Switch!"></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="field2" size="24" border="0"></td>
<td><select name="select2">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select></td>
</tr>
<tr>
<td><input type="button" onclick="clickedElm(this);" value="Switch!"></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="field1" size="24" border="0"></td>
<td><select name="select1" size="1">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</td>
</tr>
<tr>
<td><input type="button" onclick="clickedElm(this);" value="Switch!"></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="field2" size="24" border="0"></td>
<td><select name="select2">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select></td>
</tr>
<tr>
<td><input type="button" onclick="clickedElm(this);" value="Switch!"></td>
<td></td>
</tr>
<tr>
<td><input type="text" name="field1" size="24" border="0"></td>
<td><select name="select1" size="1">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</td>
</tr>
</table>
</form>- Status
Similar threads
- Locked
- Question
- Locked
- Question