SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple radios validations

    hi everyone plz i want to make a validation function for the radio buttom that have an id myradiobutton[i]
    and i varries from 1 to 8

    but i cant till now make the validation
    can anyone help me plz or send for me the function???

    <form action="test.php" method="post" name="radio_form" id="radio_form" onsubmit="return radio_button_checker()">
    <tr class="bg_1">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton1" id="myradiobutton1" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton1" id="myradiobutton1" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton1" id="myradiobutton1" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton1" id="myradiobutton1" /></td>
    </tr>
    <tr class="bg_2">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton2" id="myradiobutton2" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton2" id="myradiobutton2" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton2" id="myradiobutton2" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton2" id="myradiobutton2" /></td>
    </tr>
    <tr class="bg_1">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton3" id="myradiobutton3" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton3" id="myradiobutton3" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton3" id="myradiobutton3" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton3" id="myradiobutton3" /></td>
    </tr>
    <tr class="bg_2">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton4" id="myradiobutton4" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton4" id="myradiobutton4" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton4" id="myradiobutton4" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton4" id="myradiobutton4" /></td>
    </tr>
    <tr class="bg_1">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton5" id="myradiobutton5" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton5" id="myradiobutton5" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton5" id="myradiobutton5" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton5" id="myradiobutton5" /></td>
    </tr>
    <tr class="bg_2">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton6" id="myradiobutton6" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton6" id="myradiobutton6" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton6" id="myradiobutton6" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton" id="myradiobutton6" /></td>
    </tr>
    <tr class="bg_1">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton7" id="myradiobutton7" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton7" id="myradiobutton7" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton7" id="myradiobutton7" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton7" id="myradiobutton7" /></td>
    </tr>
    <tr class="bg_2">
    <td align="center" valign="top"><input type="radio" value="1" name="myradiobutton8" id="myradiobutton8" /></td>
    <td align="center" valign="top"><input type="radio" value="2" name="myradiobutton8" id="myradiobutton8" /></td>
    <td align="center" valign="top"><input type="radio" value="3" name="myradiobutton8" id="myradiobutton8" /></td>
    <td align="center" valign="top"><input type="radio" value="4" name="myradiobutton8" id="myradiobutton8" /></td>
    </tr>

    </form>
    </table>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    For starters you need to remove the id attributes because they are all supposed to be unique. This is all you need for validation purposes:

    Code html4strict:
    <input type="radio" value="1" name="myradiobutton1" />
    Last edited by paul_wilkins; Dec 30, 2008 at 15:28.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx for ur help but i dont know how to make this validation , my problem is not using id or names but i need a function

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There is a good standard way to validate radio buttons. You start with code to validate one group of radio buttons

    Code javascript:
    function validateRadioIsSelected(name) {
    	var validates = false;
    	var els = document.getElementsByName(name);
    	var i;
    	for (i = 0; i < els.length; i += 1) {
    		if (els[i].checked) {
    			validates = true;
    		}
    	}
    	return validates;
    }

    Then you use a function that lets you validate multiple groups of radio buttons with a similar name, where only the index number at the end is different.

    Code javascript:
    function validateSequentialRadios(commonName) {
    	var validates = true;
    	var radioIndex = 1;
    	var els = document.getElementsByName(commonName + radioIndex);
    	while (els.length) {
    		if (!validateRadioIsSelected(commonName + radioIndex)) {
    			validates = false;
    			alert(commonName + radioIndex + ' needs to be selected');
    		}
    		radioIndex += 1;
    		els = document.getElementsByName(commonName + radioIndex);
     
    	}
    	return validates;
    }

    Those piece of code remain nice and stable, and you should have little need to modify them.

    Finally you use some custom code to hook things together.

    Code javascript:
    function radio_button_checker() {
    	return validateSequentialRadios('myradiobutton');
    }

    ps. I noticed in testing that the 6th group of radio buttons has a mis-spelled name.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx for everyone , i need to make it using a function

    this is my code:



    <script language="JavaScript">
    <!--
    function radio_button_checker()
    {

    var i=1;

    for(i=1;1<9;i++) // i have 8 radio buttons

    {
    // set var radio_choice to false
    var radio_choice = false;

    // Loop from zero to the one minus the number of radio button selections
    for (counter = 0; counter < radio_form.myradiobutton[i].length; counter++)
    {
    // If a radio button has been selected it will return true
    // (If not it will return false)
    if (radio_form.radmyradiobutton[i][counter].checked)
    radio_choice = true;
    }

    if (!radio_choice)
    {
    // If there were no selections made display an alert box
    alert("Please select a letter.")
    return (false);
    }
    return (true);
    }



    }
    </script>





    the red scirpt is working correctly

    but when i made the for loop to start from myradiobutton1 to myradiobutton8

    it did not work correctly

  6. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    There is a good standard way to validate radio buttons. You start with code to validate one group of radio buttons

    Code javascript:
    function validateRadioIsSelected(name) {
    	var validates = false;
    	var els = document.getElementsByName(name);
    	var i;
    	for (i = 0; i < els.length; i += 1) {
    		if (els[i].checked) {
    			validates = true;
    		}
    	}
    	return validates;
    }

    Then you use a function that lets you validate multiple groups of radio buttons with a similar name, where only the index number at the end is different.

    Code javascript:
    function validateSequentialRadios(commonName) {
    	var validates = true;
    	var radioIndex = 1;
    	var els = document.getElementsByName(commonName + radioIndex);
    	while (els.length) {
    		if (!validateRadioIsSelected(commonName + radioIndex)) {
    			validates = false;
    			alert(commonName + radioIndex + ' needs to be selected');
    		}
    		radioIndex += 1;
    		els = document.getElementsByName(commonName + radioIndex);
     
    	}
    	return validates;
    }

    Those piece of code remain nice and stable, and you should have little need to modify them.

    Finally you use some custom code to hook things together.

    Code javascript:
    function radio_button_checker() {
    	return validateSequentialRadios('myradiobutton');
    }

    ps. I noticed in testing that the 6th group of radio buttons has a mis-spelled name.


    thnx alot but really i can understand ur code , may be becoz i dont know where it is myradiobutton1 oor myradiobutton2 ....

    where i can put it?
    and which functions will be called in the form action????



    plz i need it quikly


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
  •