We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 26931
    • 2,314 Posts
    Hi there...

    i’m trying to wrap my head around creating a form for some kind of an online poll, the thing is, that the user should only be able to select 1 checkbox:

    the form part would be:
    <table>
    	<tr>
    		<td>Venue</td>
    		<td><input name="Concert" id="concert" class="text" type="text" /></td>
    		<td><input type="checkbox" name="Band1" value="BlablaBand1"></td>
    		<td><input type="checkbox" name="Band2" value="BlablaBand2"></td>
    		<td><input type="checkbox" name="Band3" value="BlablaBand3"></td>
    	</tr>
    </table>
    and the report should look like this:
    <table>
    	<tr>
    		<td>Venue</td>
    		<td>[+Concert+]</td>
    		<td>[+Band1+]</td>
    		<td>[+Band2+]</td>
    		<td>[+Band3+]</td>
    	</tr>
    </table>
    ...this works with checkboxes, but i don’t want the user to have the option to choose more than one checkbox - and when i’m using radio buttons
    <input type="radio" name="Band[]" value="BlablaBand3">
    i’ll have the value displayed in all three table cells of the report-table

    ...or is there a way of using radio-buttons for this ( so that the value will be displayed in the appropriate table cell of the report chunk -> in this case the report has to be displayed in a certain order )?

    does anyone know how to do this?

    thanks, j
      • 26931
      • 2,314 Posts
      if it can’t be done with eForm alone...last resort would probably be jQuery smiley -> "radioCheckboxGroup: Makes all checkboxes with the given name behave like a radio button list" http://www.texotela.co.uk/code/jquery/checkboxes/
      download-link doesn’t work unfortunately...does anyone know a similar script?

      *edit - found it:
      http://www.texotela.co.uk/js/plugins/jquery.checkboxes.pack.js
      /**
       * Makes checkboxes behave like a radio button group
       *   i.e. only one can be selected at a time
       *
       * @name     radioCheckboxGroup
       * @param    name  field name
       * @author   Sam Collett (http://www.texotela.co.uk)
       * @example  $.radioCheckboxGroup("fieldname");
       *
       */
      jQuery.radioCheckboxGroup = function(name)
      {
      	var x = jQuery("input[@name=" + name + "]");
      	x.click(
      		function()
      		{
      			// uncheck every other box with the same name
      			x.not(this).each(
      				function()
      				{
      					this.checked = false;
      				}
      			).end();
      		}
      	);
      }

        • 26931
        • 2,314 Posts
        thanks to @cubusinaction - this should work:
        <html>
        <head>
          <script src="http://code.jquery.com/jquery-latest.js"></script>
          
          <script>
          $(document).ready(function(){
              
            /* select first group */
            $("#group-one input:checkbox").click( function () {
                $("#group-one input:checkbox").removeAttr("checked");
                $(this).attr("checked","checked");
            });
            
            /* select second group */
            $("#group-two input:checkbox").click( function () {
                $("#group-two input:checkbox").removeAttr("checked");
                $(this).attr("checked","checked");
            });
          });
          </script>
          <style>
          div { color:red; }
          </style>
        </head>
        <body>
          <form id="group-one">
            <input type="checkbox" name="newsletter" value="Hourly" />
        
            <input type="checkbox" name="newsletter" value="Daily" />
            <input type="checkbox" name="newsletter" value="Weekly" />
            <input type="checkbox" name="newsletter" value="Monthly" />
            <input type="checkbox" name="newsletter" value="Yearly" />
          </form>
        
          <form id="group-two">
            <input type="checkbox" name="newsletter" value="Hourly" />
            <input type="checkbox" name="newsletter" value="Daily" />
        
            <input type="checkbox" name="newsletter" value="Weekly" />
            <input type="checkbox" name="newsletter" value="Monthly" />
            <input type="checkbox" name="newsletter" value="Yearly" />
          </form>
        
        </body>
        </html>

          • 3647
          • 177 Posts
          sharkbait, I just want to thank you for posting the question, the possibility and the answer.

          This is so useful for people who bump into this later or can recognise a similar issue and see the way - even if the solution is relatively easy it is ALWAYS worth spelling it out, I only wish I’d seen this last week when I was struggling with a form!

          Mark
            • 26931
            • 2,314 Posts
            I just want to thank you for posting the question, the possibility and the answer
            you’re welcome smiley i needed a solution very quickly, so i was actually googeling & tweeting while i was typing my question...nonetheless i wanted to reassure, that i wouldn’t oversee an eForm solution