How can I require 1 of the products listed to be purchased?

  • Profile Image
    bgiff1010
    Asked on May 12, 2012 at 12:20 PM

    There will be multiple products listed, but one of them is a required purchase, so I'd like it to be auto-checked and unchangeable. But the other products can still be checked/unchecked. How can I do this? Thank you.

  • Profile Image
    gori-mathew
    Answered on May 12, 2012 at 01:13 PM

    Hi,

    In the payment integration wizard where you are adding an item, please check the screenshot as follows since it will show you how to add 'Quantity Property' to your item.

     

     

    If you'd also like to see an auto-updated price, please enable the Show Total on your form. To do that, simply click the payment field and click Show Total on the tool bar above.

    N/B: This is solution earlier given by my colleague Idarktech

    Please let us know if you need further help
  • Profile Image
    bgiff1010
    Answered on May 13, 2012 at 08:33 PM

    Yes it helps but doesn't quite solve the problem. Thank you for trying though, let me elaborate.

    There are 2 items listed, 1 Dozen cupcakes, and 1/2 Dozen cupcakes. The 1/2 Dozen has the "Quantity option" so increments of half a dozen can be added.

    The minimum order of cupcakes is 1 Dozen, and therefore want the first listed item (the 1 Dozen Cupcakes) as a required purchase. I'd like it to be auto-selected and uncheckable.

     

    Customers can then, if they want to order more than 12 cupcakes, add on in increments of 6 to their purchase using the second listed item. This option is not required.

     

    What are my available options? Thank you.

  • Profile Image
    abajan
    Answered on May 13, 2012 at 09:09 PM

    Unfortunately, there's currently no option in the payment tool to make any product a required purchase. However, the workaround provided here is one way to overcome this shortcoming.

    If you need additional help with this, please let us know.

  • Profile Image
    idarktech
    Answered on May 13, 2012 at 09:27 PM

    @bgiff1010,

    I think this might be possible with js injection. Try to add Free Text HTML tool to your form and then paste this:

    <script type="text/javascript">document.getElementById("input_6_1001").checked=true;document.getElementById("input_6_1001").disabled=true;</script>

    Here's how:

    This will checked (auto-select) and disabled the cupcake checkbox. Try it and let us know if this doesn't work so we can further assist you with this. Thanks!

  • Profile Image
    abajan
    Answered on May 13, 2012 at 11:00 PM

    Hi again bgiff1010

    I believe this demo form has the functionality you want. Unfortunately, there appears to be no way to get this to work without getting a copy of the form's full source from the form builder and embedding it into your site.

    Here's what to do:

    1. Insert a free text field in the position illustrated by idarktech, paste this code into its work area, click "Complete" and save the form

    2. Click the "Setup & Embed" tab, then Embed Form and when the "Embed Form Wizard" pops up, click Source and then copy the code provided

    3. Paste the code into a web page of your own and then add the following onClick event to the input tag of the "12 Cupcakes (1 Dozen)" element: onclick="this.checked=!this.checked;"

    4. Save your changes

    (If you view the source of my demo form, you will see exactly where the onClick event should go.)

    If you need additional assistance with this, please let us know.

  • Profile Image
    bgiff1010
    Answered on May 25, 2012 at 02:39 PM

    Thank you all, very informative and helpful! This is exactly what I wanted and the order form looks great, appreciate the help.

  • Profile Image
    jeanettebmz
    Answered on May 25, 2012 at 07:40 PM

    On behalf of my colleagues, you are very welcome!

     

    Best regards

    Jeanette

  • Profile Image
    armandolucero
    Answered on December 22, 2012 at 10:04 PM

    Regarding the demo.  I Just wanted to add, if you would like to show the product total too then edit the script as follows:

    <script type="text/javascript">
    document.getElementById("input_6_1001").checked=true;
    document.getElementById("input_6_1001").disabled=true;
    $('payment_total').update('35.00');
    </script>

    Just add the yellow part above, to the script that idarktech already mentioned.  Then the product will be checked and the total will show the amount of that product as well.

    Armando

  • Profile Image
    abajan
    Answered on December 23, 2012 at 05:22 AM

    @armandolucero

    Thanks very much for that. Using both your post and this solution for guidance, I've updated the demo. It should be noted that since we no longer allow JavaScript to be inserted via the free text tool (due to security issues), that element has been removed from the form. The script at the bottom of the demo handles everything.

  • Profile Image
    armandolucero
    Answered on December 23, 2012 at 06:36 AM

    Even better!  It is also best to start with a fresh new jotform.  I tried it with a previous form where I already used the free text tool and I ended up with unwanted artifacts.

  • Profile Image
    abajan
    Answered on December 23, 2012 at 07:06 AM

    @armandolucero

    Actually, this updated script is even better. (I updated the script in the demo from this to this) Incidentally, in case you're wondering why disabled = true wasn't used, read this.


    @bgiff1010

    To implement this solution in your current contact form, please do the following:

    1. Load the form in the form builder and delete the free text element (click it and then click itsDelete button) and save the form

    2. Copy the form's full source to your clipboard as explained in the first section of this guide. (In other words, don't click the "here" link to do download the complete form files)

    3. Drag your mouse over all of the form code currently in your web page and hit [Ctrl + V] to paste the updated code that was copied in step 2 over it

    4. Copy this code to your clipboard

    5. Under the form's code and preferably just before the closing body tag of the web page (just like you'll see in the source of the demo), paste the code you copied in step 4

    6. Save the changes

  • Profile Image
    armandolucero
    Answered on December 23, 2012 at 07:14 AM

    Thank you

  • Profile Image
    armandolucero
    Answered on December 27, 2012 at 05:33 AM

    After using the free text (HTML) tool while experimenting with all the above, I now have the radio button checked when I don't want it checked.  I deleted the free text tool option and saved my forms and I still have it showing the box as checked.

    Curiously, even when I create a brand new page I still have this problem.  I copied the code to examine it but cannot find the damaging artifact that may be the cause.

    Here is a previous form showing the persistent checked box.  Here is a newly created form with the same checked box problem.  Please help.

    I should add that everything was seemingly working fine until I checked today.  I am not sure what happened.

  • Profile Image
    idarktech
    Answered on December 27, 2012 at 06:34 AM

    @armandolucero

    There seems to be a recent changes on JotForm which affects the first paypal product to be selected by default. I am not sure if this is intentional but we can submit your inquiry to our dev team. First, we would need you to transfer your question to a separate thread to avoid confusions from this long thread since the new case might be slightly unrelated to the topic and so we can focusly help you on this new issue. Thanks for your understanding.

  • Profile Image
    abajan
    Answered on March 07, 2013 at 06:14 AM

    @everyone

    In case you haven't seen the notice about recent updates (February 25 - March 4, 2013) to the form builder, please be advised that it's no longer necessary to use the any scripts for this. It can now be done within the Payment Wizard:

     

    Thanks.