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, would you like to have a conference call this afternoon to see why it doesn't work on your instance? I'm using Fuji but I'm sure this should not be dependent of the ServiceNow version.

Thanks,

Berny

[nannette]

Yes if you're available I would like to know why it's not working

[bernyalvarado]

Sounds good. Feel free to email me to balvarado@volteo.com

Thanks,

Berny

[bernyalvarado]

The key difference is how the score radio button element is referenced to retrieve all its options. Your code will not work just because the form id of a UI page is actually generated on runtime. For this reason you can just directly reference the element by its id and the rest should work as how you have it originally.

I also added an additional alert so that you can that the right value is been selected.

I hope this helps

Thanks,

Berny

[bernyalvarado · Accepted solution]

Here goes the latest. Compatible with IE

<?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="score1" name="score" value="1"> Strongly Disagree</input><BR></BR>
             <input type="radio" id="score2" name="score" value="2"> Disagree </input><BR></BR>
             <input type="radio" id="score3" name="score" value="3"> Netural</input><BR></BR>
             <input type="radio" id="score4" name="score" value="4"> Agree</input><BR></BR>
             <input type="radio" id="score5" 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>

function submitChanges(){


var scores = document.getElementsByName("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