...

View Full Version : getting the value of a form field which is an array



DigitalPurpose
12-23-2011, 08:22 PM
I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation.

So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]?

I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it.

Happy Holidays

xelawho
12-23-2011, 08:44 PM
it might be helpful to add a class to your fields, that way you can validate according to which class it is?



<body>
<form>
Email 1:<input type="text" name="email 1" class="email"/>
Email 2:<input type="text" name="email 2" class="email"/>
Phone 1:<input type="text" name="phone 1" class="phone"/>
Phone 2:<input type="text" name="phone 2" class="phone"/>
<input type="button" value="validate" onclick="validate()"/>
</form>
<script>

function validate () {
els = document.getElementsByTagName("input")
for(var j = 0; j<els.length; j++){
if (els[j].className=="email"){
alert(els[j].name+"'s email address is "+els[j].value)
} else if (els[j].className=="phone"){
alert(els[j].name+"'s phone number is "+els[j].value)
}
}
}
</script>

</body>

felgall
12-23-2011, 08:46 PM
All your form fields should have an id. That way the label tag wrapped around the label for that form field can be linked correctly. You can then also use the id to reference the field from JavaScript leaving the name for the server side scripting to use.

DigitalPurpose
12-23-2011, 08:49 PM
Thank you for your reply, but adding classes will not solve my problem.

Many of the fields are named as arrays, such as name="myField[]", this is for interaction with PHP and the functionality of the buttons which add more fields to the form.

What I really need to know is, if you have various form fields named "emailAddresses[]" (starting with one field named emailAddresses[], and the ability to add more fields named emailAddresses[] via the add field button), how then in javascript do you get at the individual fields that make up the emailAddresses[] field array.

I have tried things like document.formName.emailAddressess.length (did not work), document.formName.emailAddressess[i].value where i was a for loop variable, etc., and just haven't found the correct syntax to access the individual field values that make up the array of fields.

xelawho
12-23-2011, 08:52 PM
so do it directly with their names...



<body>
<form>
Email 1:<input type="text" name="email[]" class="email"/>
Email 2:<input type="text" name="email[]" class="email"/>
Phone 1:<input type="text" name="phone[]" class="phone"/>
Phone 2:<input type="text" name="phone[]" class="phone"/>
<input type="button" value="validate" onclick="validate()"/>
</form>
<script>

function validate () {
els = document.getElementsByTagName("input")
for(var j = 0; j<els.length; j++){
if (els[j].name=="email[]"){
alert("email address is "+els[j].value)
} else if (els[j].name=="phone[]"){
alert("phone number is "+els[j].value)
}
}
}
</script>

</body>

or am I misunderstanding the question?

DigitalPurpose
12-23-2011, 08:53 PM
All your form fields should have an id. That way the label tag wrapped around the label for that form field can be linked correctly. You can then also use the id to reference the field from JavaScript leaving the name for the server side scripting to use.

So for instance, the fields would remain named emailAddressess[], but would have id="email0", and then in my code that adds additional fields, I would have a counter variable, and make the added fields be named emailAddresses[], with an id="email1", id="email2", etc., and then access the individual field values via their id.

If this is correct, that looks like a solution. My only remaining question then would be what is the correct syntax for getting at the length of the emailAddressess[] array, to set the limit on my for loop which will do the validation procedures.

Thank you very much for this idea.

Logic Ali
12-23-2011, 08:54 PM
myForm.elements[ "emailAddress[]" ][ index ];

DigitalPurpose
12-23-2011, 08:56 PM
so do it directly with their names...



<body>
<form>
Email 1:<input type="text" name="email[]" class="email"/>
Email 2:<input type="text" name="email[]" class="email"/>
Phone 1:<input type="text" name="phone[]" class="phone"/>
Phone 2:<input type="text" name="phone[]" class="phone"/>
<input type="button" value="validate" onclick="validate()"/>
</form>
<script>

function validate () {
els = document.getElementsByTagName("input")
for(var j = 0; j<els.length; j++){
if (els[j].name=="email[]"){
alert("email address is "+els[j].value)
} else if (els[j].name=="phone[]"){
alert("phone number is "+els[j].value)
}
}
}
</script>

</body>

or am I misunderstanding the question?

This could also work, thank you very much.

DigitalPurpose
12-23-2011, 08:57 PM
myForm.elements[ "emailAddress[]" ][ index ];

Thanks, that should do it for my problem, thank you to all three of you!

xelawho
12-23-2011, 08:59 PM
if you have an array then you do not need to know the length of it. The for loop:


for(var j = 0; j<emailAddresses.length; j++){
//do stuff
}

will figure that out and keep running til it gets to the end.

put this somewhere in your code, after the array has been defined and you can see what I mean:

alert(emailAddresses.length)

DigitalPurpose
12-23-2011, 09:01 PM
if you have an array then you do not need to know the length of it. The for loop:


for(var j = 0; j<emailAddresses.length; j++){
//do stuff
}

will figure that out and keep running til it gets to the end.

put this somewhere in your code, after the array has been defined and you can see what I mean:

alert(emailAddresses.length)

I tried that before I made this post, and it did not work. Perhaps j<emailAddressess[].length is correct?

xelawho
12-23-2011, 09:10 PM
no, it's more like what Ali is talking about:

alert(document.forms[0]["emailAddresses[]"].length)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum