Radio Buttons and Checkboxes

  • Profile Image
    Asked on November 23, 2012 at 09:02 PM

    I'm using the wizard for Paypal Pro and have four radio buttons.

    The customer can only choose one package but I would also like to add

    a few items that are optional (check boxes) and show a total.

    I don't think the wizard can do that for me so I guess I need some sort of shopping cart.

    Any suggesgions?



  • Profile Image
    Answered on November 23, 2012 at 09:30 PM

    Hello Tim.  What you can do is add the total on the Payment tool.  Then, instead of getting the embed code, get the HTML source code. 

    Next: Place the HTML code on your webpage. and then find on the HTML code the checkboxes that you'd want to change to radio buttons by changing the type within the HTML code.


    From this:
    <input class="form-checkbox" type="checkbox" id="input_3_1001" name="q3_listingPakages[][id]" value="1001" />

    To this:
    <input class="form-checkbox" type="radio" id="input_3_1001" name="q3_listingPakages[][id]" value="1001" />

    Save your page.  It should make your product field to radio with checkboxes combined.

    Please let us know if you need further assistance.


  • Profile Image
    Answered on November 24, 2012 at 06:41 AM

    Hi Tim

    I believe there may have been some misunderstanding about your requirements. From what I can tell, you need just the opposite solution. In other words, you have all of the items as radio buttons ("...the customer can choose only one item") and would like to add "items that are optional (checkboxes)". If this is the case, change the input type of those optional items to checkbox. (It may also be a good idea to change the class of those inputs from form-radio to form-checkbox [like this] although doing so doesn't seem to make any difference.)

    Also, to have the total displayed, click the payment field and then the Show Total button:


  • Profile Image
    Answered on November 24, 2012 at 07:14 AM

    Great solution, Liyam. I actually doubted that it would work and instead of testing it, proceeded to forge ahead with a JavaScript/CSS solution somewhat similar to one I had earlier provided. It's only after testing my solution that I realized yours worked just as well (in fact, better).

  • Profile Image
    Answered on November 26, 2012 at 09:36 PM

    Great help thanks Gent's;

    I didn't know the code was available that's great but now I have to get your css to override the default wordpress css. That should be do-able but for now I have a different problem.

    I have inserted a hidden field manually into the form but it's not getting passed to my database.
    I'm using a plug-in to capture the data successfully.

    Here is a screen capture of a database peek.

    You may notice that one column is "untitled" 

    If you view source of
    you'll see the hidden field just under the form tag and it's value is "New_Order_Submit" .
    That field usually ends up as the name of those fields in the database and also the name of the "untitled" column.
    Another filed that is hidden is "Status_13" and that appears in the peek.

    I've cc'd the plugin developer also so he is aware of this behavior.

    Thanks for your help.


  • Profile Image
    Answered on November 26, 2012 at 10:55 PM


    You should add the mentioned hidden field to your form using JotForm Builder not by manually adding it to your source, that won't be included on the submissions process. Here's a short visual guide: 

    Hope this helps. Thanks!

  • Profile Image
    Answered on November 27, 2012 at 06:51 AM

    There is no green dot to be found. Have no idea what you are doing to get that!

    And what the heck is this?

  • Profile Image
    Answered on November 27, 2012 at 07:02 AM

    Hi Karen Tim

    A hidden field first needs to be inserted. After insertion, once the field is clicked, you'll see the Default Value button (the "green dot") in the Properties tab of the toolbar, as illustrated by my colleague. The hidden field is located in the Power Tools menu:


    As to, please explain the circumstaces under which you're seeing this.