How to pass the value from DB to the group of radio buttons?

Question

I have a question related to radio buttons. So I have form that user fill up and save in DB. User has option to email that form to them self. If users click on the link they should get the form with their information. At this point I was able to retrieve all text input values, problem for me is how to pass the value from DB to the group of radio buttons? Here is example of HTML code:

<cfquery name="jobInfo" datasource='test'>
    SELECT jobCat 
    FROM   userInfo
    WHERE  UserID = <cfqueryparam cfsqltype="cf_sql_integer" value="#RecID#"> 
</cfquery>

<cfoutput query="jobInfo">
    <tr>
       <th>Jobs</th>
    </tr>
    <tr>
       <td>
          <label>
             <span><input type="radio" name="category" value="Teacher" id="teacher"></span> 
             <span>Teacher</span>
          </label><br>
          <label>
             <span><input type="radio" name="category" value="Professor" id="professor"></span>
             <span>Professor</span>
          </label><br>
          <label>
             <span><input type="radio" name="category" value="Athletic" id="athletic"></span>
             <span>Athletic Director</span>
          </label>
      <td/>
    </tr>
</cfoutput>

then I tried to retrieve the value for the radio buttons like this:

<script>
    $('input:radio[name="category"]').val('<cfoutput>#jobInfo.jobCat#</cfoutput>');
</script>

Query output:

<cfoutput>#jobInfo.jobCat#</cfoutput> gives me: Teacher

Usually I was able to get the values for check boxes if I used field id but in this case I have to pass the value to the group of radio buttons. If anyone knows what I'm doing wrong please let me know. Thanks.

Are these radio buttons part of the form that gets submitted? — Dan Bracuk, Jan 19 '16 at 15:28
Yes, they are. Can this be done maybe with cfif inside of each input tag for radio buttons? — espresso_coffee, Jan 19 '16 at 15:56

score 3 · Accepted Answer · edited Jan 20 '16 at 13:30

3

You are making this much more complicated than necessary. If you are submitting the form, javascript is simply not necessary.

The first thing you want to do is preselect the radio button that co-incides with the query output. Here is how you do that for teacher.

<input 
    type="radio" 
    name="category" 
    value="Teacher" 
    id="teacher"
    <cfif jobInfo.jobCat is "teacher">selected="selected"</cfif>
>

Repeat for the other two choices.

edited Jan 20 '16 at 13:30

rrk

15,677
4
29
45

answered Jan 19 '16 at 16:08

Dan Bracuk

20,699
4
26
43

I think you mean `checked="checked"` . See http://stackoverflow.com/questions/5592345/how-to-select-a-radio-button-by-default – James A Mohler Jan 19 '16 at 18:47

André Ferrari · Answer 2 · 2016-01-19T16:07:57.440

I guess you code do something like this:

<span><input type="radio" name="category" value="Teacher" id="teacher" #((jobInfo.jobCat EQ "Teacher")?'selected="selected"':"")#  ></span> 
<span>Teacher</span>

And do the relative for the other spans.

It would be better if the values actually came from a list so you don't repeat your logic too much like this

<tr>
   <td>
      <cfloop list="Teacher,Professor,Athletic" index="currCat">
      <label>
         <span><input type="radio" name="category" value="#currCat#" id="#currCat#" #((jobInfo.jobCat EQ currCat)?'selected="selected"':"")></span> 
         <span>#currCat#</span>
      </label><br>
      </cfloop>
  <td/>
</tr>

Hope it helps

How to pass the value from DB to the group of radio buttons?

2 Answers2