Posted By

powerthru on 10/12/10


Tagged

form checkboxes groups Salsa


Versions (?)

require one of three Salsa group checkboxes to be selected


 / Published in: JavaScript
 

URL: http://act.truemajorityaction.org/p/salsa/web/common/public/content?content_item_KEY=49

We set up a voting page, where supporters would choose one of three candidates (only two are shown in the snippet). By clicking the checkbox, the supporter would add themselves to a Salsa group. This way only one vote for a candidate by a supporter would count, it would be easy to find the count for each candidate, and it would be easy to find the supporters who picked each candidate.

We wanted to make it "required" to select one of the checkboxes, but we couldn't simply make the checkbox required because then supporters would be required to choose THAT checkbox. The solution was to add another field, called pacvoted, and make it a hidden field, and require THAT field to be filled out. Then we used the javascript shown here to fill out the pacvoted field whenever any of the groups checkboxes was selected. This way if no checkbox was selected, the error checking on the page reported that a required field was missing; but if any checkbox was checked, the page passed error checking.

  1. <div style="background-color: rgb(255, 255, 204); padding: 5px; font-size: 12px; border: thin solid rgb(102, 136, 0);">
  2. <label>
  3. <input type="checkbox" name="groups_KEY659_checkbox" value="1" id="j1" onclick="radioME(this); copyContact(this);" />
  4. <strong>Vote for Carol Shea Porter</strong>
  5. <input type="hidden" value="true" name="groups_KEY659_checkbox" value="1" id="j1" onclick="radioME(this); copyContact(this);" />
  6. </label>
  7. </div>
  8.  
  9. <div style="background-color: rgb(255, 255, 204); padding: 5px; font-size: 12px; border: thin solid rgb(102, 136, 0);">
  10. <label>
  11. <input type="checkbox" onclick="radioME(this); copyContact(this);" id="j0" value="1" name="groups_KEY658_checkbox"/>
  12. <strong>Vote for Dan Seals</strong>
  13. </label>
  14.  
  15.  
  16.  
  17.  
  18. <input type="hidden" value="" id="f1" name="pac_voted"/>
  19. <input type="hidden" name="required" value="Email,Zip,First_Name,pac_voted,"/>
  20.  
  21.  
  22.  
  23.  
  24. <script language="javascript">
  25. <!--
  26. function copyContact(tothing, fromthing) {
  27. eval("document.actionForm.pac_voted.value = document.actionForm.groups_KEY658_checkbox.value");
  28. }
  29. //--></s

Report this snippet  

You need to login to post a comment.