Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question getting the value of a form field which is an array

    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
    Last edited by DigitalPurpose; 12-23-2011 at 08:29 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it might be helpful to add a class to your fields, that way you can validate according to which class it is?

    Code:
    <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>

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    so do it directly with their names...

    Code:
    <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?

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    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.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    myForm.elements[ "emailAddress[]" ][ index ];

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    so do it directly with their names...

    Code:
    <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.

  • #9
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    myForm.elements[ "emailAddress[]" ][ index ];
    Thanks, that should do it for my problem, thank you to all three of you!

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if you have an array then you do not need to know the length of it. The for loop:

    Code:
    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:
    Code:
    alert(emailAddresses.length)

  • #11
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    if you have an array then you do not need to know the length of it. The for loop:

    Code:
    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:
    Code:
    alert(emailAddresses.length)
    I tried that before I made this post, and it did not work. Perhaps j<emailAddressess[].length is correct?

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    no, it's more like what Ali is talking about:
    Code:
    alert(document.forms[0]["emailAddresses[]"].length)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •