Using the Array for a group of Radio Buttons

[nannette]

I have a UI Page with a group of Radio Buttons.   I can't seem to make the array work because I have a ui_form instead of a form.   I need to use the ui_form because I need to use the processing script area.   Any help you can share will be greatly appreciated.

<g:ui_form id="ivr_survey">

    <table id="survey" width="100%">

        <TR>

          <TD><SPAN class="normal"><B><h1>Agent Survey</h1></B></SPAN></TD></TR>

      <TR>

        <TD><SPAN class="normal"><B><h3>I had the tools and/or resources required to resolve the caller's issue to the caller's satisfaction</h3></B></SPAN></TD></TR>  

      <TR>

          <TD><SPAN class="normal">

            <input type="radio" id="score" name="score" value="1"> Strongly Disagree</input><BR></BR>

            <input type="radio" id="score" name="score" value="2"> Disagree </input><BR></BR>

            <input type="radio" id="score" name="score" value="3"> Netural</input><BR></BR>

            <input type="radio" id="score" name="score" value="4"> Agree</input><BR></BR>

            <input type="radio" id="score" name="score" value="5"> Strongly Agree</input>

        </SPAN></TD>

      </TR>

            <td colspan="2" align="Left">

                    <button type="submit" id="submit" onclick="submitChanges();">Submit</button>

            </td>

Client Script

function submitChanges(){

var tlscore;

var scores = document.ivr_survey.score;

// var radios = scores.elements.score;

      for (var i = 0, len=scores.length; i< len; i++) {

            if (scores[i].checked ) { // radio checked?

                      tlscore = scores[i].value; // if so, hold its value in tlscore

                    break; // and break out of for loop

      }

    }

Thanks

[bernyalvarado]

Hi Nannette, try the following. It should work

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


   <g:ui_form id="ivr_survey">
     <table id="survey" width="100%">
         <TR>
           <TD><SPAN class="normal"><B><h1>Agent Survey</h1></B></SPAN></TD></TR>
       <TR>
         <TD><SPAN class="normal"><B><h3>I had the tools and/or resources required to resolve the caller's issue to the caller's satisfaction</h3></B></SPAN></TD></TR> 
       <TR>
           <TD><SPAN class="normal">
             <input type="radio" id="score" name="score" value="1"> Strongly Disagree</input><BR></BR>
             <input type="radio" id="score" name="score" value="2"> Disagree </input><BR></BR>
             <input type="radio" id="score" name="score" value="3"> Netural</input><BR></BR>
             <input type="radio" id="score" name="score" value="4"> Agree</input><BR></BR>
             <input type="radio" id="score" name="score" value="5"> Strongly Agree</input>
         </SPAN></TD>
       </TR>
             <td colspan="2" align="Left">
                     <button type="submit" id="submit" onclick="submitChanges();">Submit</button>
             </td>
   </table>
   </g:ui_form>

</j:jelly>

Client Script:

function submitChanges(){


var scores = score;

       for (var i = 0, len=scores.length; i< len; i++) {
             if (scores[i].checked ) { // radio checked?
                       tlscore = scores[i].value; // if so, hold its value in tlscore
       alert('Selected option value: ' + tlscore);
                     break; // and break out of for loop
       }
     }
}

Thanks,

Berny

[axwin]

What is 'score' here? don't you need to use document.getElementById? Am I missing something here?

[bernyalvarado]

Hi Aswin,

score retrieves the array of elements of the radio buttons. You don't need to use geElementById since that will only retrieve the first element, instead of the array which is what you need.

Thanks,

Berny

[nannette]

Yes that is what I was getting just the first item.   I will try your suggestions and let you know what happens.

Thanks