PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

jQuery radiobutton

  1. Ketiga
    Member

    Hi,

    I am trying to make my gravity forms radio buttons (and checkboxes) to look like this jQuery example:

    http://jqueryui.com/button/#radio

    I can't get it to work though. I does work when I use pure html but not in combination with the gravity forms radiobuttons.

    Really would appreciate someone pointing me in the right direction or providing a working example in Gravity Forms.

    Cheers,

    Bart

    Posted 10 years ago on Saturday November 24, 2012 | Permalink
  2. Richard Vav
    Administrator

    Hi Bart,

    Could you post a link to the page your form is on, so we can get a look at what you have so far and where the problem may be

    Posted 10 years ago on Sunday November 25, 2012 | Permalink
  3. Ketiga
    Member

    The site isn't live yet, but I'll try and explain what I've done:

    At this point I am just wondering if I can get the radiobuttons to be more like buttons so on mobile devices you can click a larger area and navigating becomes a bit easier.

    Here's my code:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
       <script>
      jQuery(document).ready(function() {
      jQuery( "#radio_button" ).buttonset();
      });
      </script>
    
    <form>
    <div id="radio_button">
        <input type="radio" id="button1" name="test" /><label for="button1">button1</label>
        <input type="radio" id="button2" name="test" /><label for="button2">button2</label>
    </div>
    </form>

    This works perfectly when just copied and pasted in a wordpress page.

    When I try and use the very same code in a gravity form though it doesn't.

    The only change I make is that I put this part:

    <div id="radio_button">
    
    </div>

    In html blocks before and after my radiobutton fields.

    Why wouldn't this work?

    Posted 10 years ago on Monday November 26, 2012 | Permalink
  4. Richard Vav
    Administrator

    You don't really need the html fields to open and close a div around your radio button field, all you need is to find out the id's for the ul that contains your radio buttons so in the example below I am defining inputs 10 and 13 of form 1 as jquery ui buttonsets

    $(document).ready(function(){$("#input_1_10,#input_1_13").buttonset();

    Posted 10 years ago on Monday November 26, 2012 | Permalink
  5. Ketiga
    Member

    Works like a charm!

    Thank you very much, this is great :)

    Posted 10 years ago on Monday November 26, 2012 | Permalink
  6. Richard Vav
    Administrator

    No problem, glad you got it working

    Posted 10 years ago on Monday November 26, 2012 | Permalink
  7. David Peralty

    Thanks richardvav!

    Posted 10 years ago on Monday November 26, 2012 | Permalink

This topic has been resolved and has been closed to new replies.