SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    validation with arrays and radio buttons

    Hi,

    I have a form that a person fills out to buy tickets. On the first page, he may enter in to buy tickets for guests.

    If the user selects to have guests, then he needs to enter in their information. (firstname, lastname, email, birthdate, and gender).

    I use php to generate the propper amount of form fields having an output like so:
    Code:
    [LOOP]
    <input type=text" name="first_name[]"> <input type=text" name="last_name[]">
    <input type=text" name="emai[]l"> <input type=text" name="birthdate[]">
    <input name="gender[]" id="gender[]" type="radio" value="Male" /> <input name="gender[]" id="gender[]" type="radio" value="Female" />
    [/LOOP]
    So, first I need to know how many items in the array, since it's variable, to loop though the validation? I can pull that with PHP form the previous page if needed.

    The real question is how to loop though these fields, verify if they are all filled out (including radio buttons). Bonus would be validation on the email address.

    I am REALLY new to javascript, but excel at php.....

  2. #2
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... I tried to do this and it didn't seem to work... Firebug says the variable frist_name_guest is undefined?

    Code:
    	function verify() {
    		formObj = document.OrderMe2;
    		for (var i=0; i< formObj.first_name_guest.length; i++){
    			if (formObj.first_name_guest[i].value == "") {
    				alert("You have to Fill in All the Guest First Names");
    				return false;
    			}
    		}
    	}

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can't have [] in an id and you can't have two ids the same. ids must start with a letter, can only contain letters and numbers, and must be unique.

    Where you are using arrays in the name field for the server side processing you can make things much easier for yourself for the JavaScript processing by giving each field an id and using that to reference the field from the JavaScript using document.getElementById(the-id).value, you'll need an id on each field anyway to attach the label that describes the field.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... so I used some php to make the id's unique, however, it still gets the same error. Here is how my form fields now get outputted like so:

    HTML Code:
    <input type="text" id="first_name_guest_0" name="first_name_guest[]" size="15" />
    <input type="text" id="first_name_guest_1" name="first_name_guest[]" size="15" />

    Code:
    function verify() {
    	formObj = document.OrderMe2;
    	if (!formObj.terms.checked) {
    		alert("You have to the Terms and Conditions to Purchase");
    		return false;
    	}
    	for (var i=0; i< formObj.first_name_guest.length; i++){
    		if (formObj.first_name_guest[i].value == "") {
    			alert("You have to Fill in All the Guest First Names");
    			return false;
    		}
    	}
    }
    So I'm not sure if it's an id thing....

  5. #5
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We've established in PHP forum that you're going with arrays.

    Code:
    var first_names = document.getElementsByName('first_name[]');
    
    for (i = 0; i < first_names.length; i++) {
        if (first_names[i].value == '') {
            // empty
        }
    }
    felgall is right saying that you need unique id's to label the fields. But that's a different story to what we discussed in PHP forum. Use ids to assign labels (ie. HTML <label> tags) and use name to validate the data using JavaScript and pass it on to PHP.

  6. #6
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh.. that was the ticket. I needed to assign the array to a variable. Missing the first line. Thanks much!

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Those names create arrays in PHP but not in JavaScript.

    The simplest way to reference the <input type="text" id="first_name_guest_0" name="first_name_guest[]" size="15" /> field from JavaScript is document.getElementById('first_name_guest_'+i).value where i is your loop variable for looping through them.

    Code:
    function verify() {
    	if (!document.getElementById('terms').checked) {
    		alert("You have to the Terms and Conditions to Purchase");
    		return false;
    	}
    	for (var i=0; !document.getElementById('first_name_guest_'+i); i++){
    		if (document.getElementById('first_name_guest_'+i).value == "") {
    			alert("You have to Fill in All the Guest First Names");
    			return false;
    		}
    	}
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Web Professional
    Join Date
    Oct 2008
    Location
    London
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Those names create arrays in PHP but not in JavaScript.
    Code:
        document.getElementsByName['first_name[]');
    It works fine, doesn't it?


Bookmarks

Posting Permissions

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