PDA

Click to See Complete Forum and Search --> : How to Get The form Element Index?

said_fox
01-04-2003, 04:39 PM
In javaScript Forms and Forms Elements can be accessed by two ways:
1- By their Own names, i.e.,
document.myform0.mytext0.*Any thing*.
2- By considering them as arrays element and using their indeces, i.e.,
document.forms[0].mytext[0].*Any thing*.

So we can get the total number of a form elements-any elements- like,
document.forms[0].length
and if we have certain type of elements we want to get its number, eg.
text fields called mytext we can code like,
document.forms[0].mytext.length

Now My question is:
How can I make JavaScript determine the index of a form element? i.e.
<form>
<input type="text" name="texts">// the index here is 0, texts[0]
<input type="text" name="texts">// the index here is 1, texts[1]
<input type="text" name="texts">// the index here is 2, texts[2]
</form>
I want it to get these numbers 0,1,2
I think it will need an eventhandler inside the element as attribute,
and this will supply a function with these values, But How???
Please Help!:confused:
khalidali63
01-04-2003, 06:23 PM
is this something close to what you were looking for?

Khalid


<script>
function processForm(){
var textfields = document.frm.texts;
var msg = "";
for(x=0;x<textfields.length;x++){
msg+="texts["+x+"].value = "+textfields[x].value+"<br>";
}
document.getElementById("message").innerHTML = msg;
}
</script>
</head>
<body>
<form name="frm">
<input type="text" name="texts">
<input type="text" name="texts">
<input type="text" name="texts"><br>
<input type="Button" value="Process" onclick="processForm();"></input>
</form>
<div id="message" style="position:absolute"></div>
said_fox
01-04-2003, 06:51 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
var tao;

function myfox(bss)
{

if (!document.forms[0].cond[bss].checked)
{

this.blur();
alert("You Cannot edit till you check the box");
}

}


</script>


<title>Untitled</title>
</head>
<body>
<form>
<table border="1">
<tr>
<td>
<input type="text" name="texts" value="Try to change me!" onclick="myfox(0)">
</td>//I don't want to write the integer parameter inside myfox(), I want JvaScript
//to generate it inside the event handler onclick and pass it to the myfox()
<td>
Make me Editable<input type="checkbox" name="cond">
</td>
</tr>
<tr>
<td>
<input type="text" name="texts" value="Try to change me!" onclick="myfox(1)">
</td>
<td>
Make me Editable<input type="checkbox" name="cond">
</td>
</tr>
<tr>
<td>
<input type="text" name="texts" value="Try to change me!" onclick="myfox(2)">
</td>
<td>
Make me Editable<input type="checkbox" name="cond">
</td>
</tr>
</table>
</form>
</body>
</html>
May This Be Done?:confused: :(
khalidali63
01-04-2003, 06:55 PM
What is it you intend to so in this page..?
AdamBrill
01-04-2003, 09:37 PM
I think this is what you wanted to do:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
var tao;

function myfox(bss)
{
test=document.getElementsByTagName("input");
x=0;
do
{
if(test[x]==bss)
{
break;
}
x++;
}while (x<test.length)
if (!test[x+1].checked)
{
bss.blur();
alert("You Cannot edit till you check the box");
}

}


</script>


<title>Untitled</title>
</head>
<body>
<form>
<table border="1">
<tr>
<td>
<input type="text" id=1 name="texts" value="Try to change me!" onclick="myfox(this)">
</td>//I don't want to write the integer parameter inside myfox(), I want JvaScript
//to generate it inside the event handler onclick and pass it to the myfox()
<td>
Make me Editable<input id=1 type="checkbox" name="cond">
</td>
</tr>
<tr>
<td>
<input type="text" name="texts" value="Try to change me!" onclick="myfox(this)">
</td>
<td>
Make me Editable<input type="checkbox" name="cond">
</td>
</tr>
<tr>
<td>
<input type="text" name="texts" value="Try to change me!" onclick="myfox(this)">
</td>
<td>
Make me Editable<input type="checkbox" name="cond">
</td>
</tr>
</table>
</form>
</body>
</html>


Let me know if that's not what you wanted...
khalidali63
01-04-2003, 10:29 PM
Code posted above works ofcourse,
but he desired something wiht a bit different functionality..:cool:

I don't want to write the integer parameter inside myfox(), I want JavaScript to generate it inside the event handler onclick and pass it to the myfox()

code below will do just that


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Untitled</title>
<script language="JavaScript" type="text/javascript">
if(!document.all && document.getElementById){
document.captureEvents(Event.ONCLICK);
}
document.onclick=myfox;
function myfox(e){
var obj = (!document.all && document.getElementById )? e.target:event.srcElement;
var fm = document.frm.texts;
for(x=0;x<fm.length;x++){
if(fm[x]==obj){
if (!document.forms[0].cond[x].checked){
obj.blur();
alert("You Cannot edit till you check the box");
}
}
}
}
</script>
</head>
<body>
<form name="frm">
<table border="1">
<tr>
<td><input type="text" name="texts" value="Try to change me!"></td>
<td>Make me Editable<input type="checkbox" name="cond"></td>
</tr>
<tr>
<td><input type="text" name="texts" value="Try to change me!"></td>
<td>Make me Editable<input type="checkbox" name="cond"></td>
</tr>
<tr>
<td><input type="text" name="texts" value="Try to change me!"></td>
<td>Make me Editable<input type="checkbox" name="cond"></td>
</tr>
</table>
</form>
</body>
</html>
said_fox
01-05-2003, 07:47 AM
To Mr. khaled,
The code you had submitted, works so good and it's exactly what I need.
Thank you for your valuable help.:D
said_fox
01-05-2003, 07:58 AM
Thanks Dave
I think what you told in your reply will be so helpful