RadioButtonList JS Validation

[ypdev]

Hi,
I am trying to validate RadioButtonList (ASP.NET) using the following js function but for some reason it does not working properly. I can't get the ID of the control as I would be..

Can you help please?

<asp:RadioButtonList ID="T_selector" runat="server">
         <asp:ListItem Value="1">Team1</asp:ListItem>
         <asp:ListItem Value="2">Team2</asp:ListItem>
</asp:RadioButtonList>

<script language="javascript" type="text/javascript">
function validate()
{

      if (document.getElementById("T_selector").checked==false)
      {
                 var answer = confirm ("Please confirm selection...")
                 if (answer)
                 return true;
                 else
                 return false;
      }
      

     return true;
}
</script>

[Fungus1487]

<asp:RadioButtonList ID="T_selector" runat="server">

The ID you give the ASP control will change at runtime.
if (document.getElementById("T_selector").checked==false)
You need to change your hardcoded ID string to change at runtime using.

(document.getElementById('<%= T_selector.ClientID %>').checked==false)

or you can use the following if you have the Microsoft Ajax Library in your project.

($get ('T_selector').checked==false)

The id's you set for ASP controls are changed at runtime due to the server side compilation. This may seem confusing but for instance if you have a page which contains 2 user controls which both contain a textbox with id 'textName' then the document could not be well formed due to two ID's colliding, also the server would not be able to distinguish between the two on postback.

Hope this helps.

[ypdev]

Thanks for your help but your example is more relevant for text field.
The control I am using is 'RadioButtonList' which in my case has more than one 'input' controls that assigned to differente ID.

Here is the HTML output when I run the application:

<table id="T_selector" border="0">
<tr>
<td><input id="T_selector_0" type="radio" name="T_selector" value="1" /><label for="T_selector_0">Team1</label></td>
</tr><tr>
<td><input id="T_selector_1" type="radio" name="T_selector" value="2" /><label for="T_selector_1">Team2</label></td>
</tr>
</table></td>

Any idea how to fix it?

Thanks.

[ypdev]

Finally I found something very similar to what I am looking for, but
now I need your help to disable loop.

Basically I need to validate only once, if the user click OK
then I don't want the js continue validate additional controls even if it is '&&'.

Appriciate your help!

Here is the code:

<script type="text/javascript">
<!--
function validate()
{
<strong> return validateRBL('<%= T_selector.ClientID %>') && validateRBL('<%= P_selector.ClientID %>');</strong>
 }
function validateRBL(RBLid)
{
 var listItemArray = document.getElementsByName(RBLid);
 var isItemChecked = false;

 for (var i=0; i<listItemArray.length; i++)
 {
  var listItem = listItemArray[i];

  if ( listItem.checked )
  {
   //alert(listItem.value);
   isItemChecked = true;
  }
 }

 if ( isItemChecked == false )
 {
                 var answer = confirm ("Please confirm selection...")
                 if (answer)
                 return true;
                 else
                 return false;
 }

 return true;
}

// -->
</script>

[Fungus1487]

i dont quite understand what you mean by "Basically I need to validate only once, if the user click OK then I don't want the js continue validate additional controls even if it is '&&'." so this could be wrong but.

in your "validate" function if you check the first method then set a global flag if the user chooses ok you can check before hitting the second validation.

var wasOkPressed = false;
function validate() {
    wasOkPressed = false;
    var firstResult = validateRBL('<%= T_selector.ClientID %>');
    return wasOkPressed ? true : firstResult && validateRBL('<%= P_selector.ClientID %>');
}

[ypdev]

Good start... if the user select first or second control, the confirm window prompt once.
If the user select the third control or other controls (not 1 or 2), the confirm window prompt twice before submit the form.
I need the confirm window to prompt only once, no matter what control is.

Also, when first and second controls are selected, the confirm window does not prompt.. I have about 30 controls to validate.

I've tried many things but with no success...

Can you help please?

[Fungus1487]

Following code should set you on the right path.

var wasOkPressed = false;

// Create an array of your checked controls
var controlArray = [ '<%= T_selector.ClientID %>', '<%= P_selector.ClientID %>', '<%= Q_selector.ClientID %>', '<%= R_selector.ClientID %>' ];

function validate() {
    wasOkPressed = false;

    // Loop through each control
    for(var i = 0; i < controlArray.length; i ++) {
        if (!wasOkPressed ) { // If ok was not pressed keep validating
            if (!validateRBL(controlArray[i])) {
                // If control fails to validate return false
                return false;
            }
        }
    }
    return true;
}

[ypdev]

I changed the JS per your suggestion, but now the confirm window prompt for each control. let's say if I have 30 controls - the confirm window prompt 30 times...

Here is the complete JS I am using, can you check please..

<script type="text/javascript">
<!--
var wasOkPressed = false;

// Create an array of your checked controls
var controlArray = [ '<%= T_selector.ClientID %>', '<%= P_selector.ClientID %>', '<%= Q_selector.ClientID %>', '<%= R_selector.ClientID %>' ];

function validate() {
    wasOkPressed = false;

    // Loop through each control
    for(var i = 0; i < controlArray.length; i ++) {
        if (!wasOkPressed ) { // If ok was not pressed keep validating
            if (!validateRBL(controlArray[i])) {
                // If control fails to validate return false
                return false;
            }
        }
    }
    return true;
}

function validateRBL(RBLid)
{
 var listItemArray = document.getElementsByName(RBLid);
 var isItemChecked = false;

 for (var i=0; i<listItemArray.length; i++)
 {
  var listItem = listItemArray[i];

  if ( listItem.checked )
  {
   //alert(listItem.value);
   isItemChecked = true;
  }
 }

 if ( isItemChecked == false )
 {
                 var answer = confirm ("Please confirm selection...")
                 if (answer)
                 return true;
                 else
                 return false;
 }

 return true;
}

// -->
</script>

Thank you so much!

[Fungus1487]

function validateRBL(RBLid)
{
   ...
    if ( isItemChecked == false ) {
        var answer = confirm ("Please confirm selection...")
        if (answer) {
            wasOkPressed = true; /* You forgot to set the global flag */
            return true;
        } else {
            return false;
        }
    }
    ...
}

You forgot to set the global 'wasOkPressed' flag after someone has selected Ok in the confirm dialog, this is how it knows whether to keep on validating. good luck.

[ypdev]

Thank you so much 'Fungus1487' - it is working properly now!