What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to hide Purchase order Product from email

    Asked by RACRUSWAL on January 17, 2014 at 09:32 AM

    Thanks for your all fabulous support in the past - I'm really hoping you can help me out with my latest little problem.

    I have used the folllowing code to style the form and to hide the check-box. As you will see in the form url below and have added a zero quantity to the dropdown qty field.

     

    My problem is: When the user changes the qty field and then decides they don't want the product and changes it back to zero - the product appears on the email submission with a 0 price and a 0 quantity.  This has become an issue with my client and the people that are entering the orders.  This only happens when a user adjusts the quantity field.

    Is there some css code that I can inject into the form styles area or place in the html on the email notification that could hide the product and description if the quantity or price is equal to 0.

     

    I really hope you can help.

    Thanks so much,

    Rachelle

     

    .form-product-item br

    {

    display:none;

    }.form-product-item

    {

    width:800px

    }.form-product-item .form-sub-label-container

    {

    float:left;

    }

    .form-product-item br

    {

    display:none;

    }.form-product-item

    {

    width:800px

    }.form-product-item .form-sub-label-container

    {

    float:left;

    }

    #input_440_1003.form-checkbox{display: none !important;

    }

    #input_440_1006.form-checkbox{display: none !important;

    }

    Page URL:
    http://www.jotform.com//?formID=40016228552345

    Screenshot
    email purchase product checkbox problem style email notification
  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 17, 2014 at 11:24 AM

    Thank you for contacting us. I have looked into your form, the problem why you are seeing 0 quantities on the email is because you hide the Payment checkboxes. If a user sets a quantity, the form will automatically checks the box. Now they can not uncheck the box because you have hidden it.

    Normally, setting the "Hide Empty Fields on Emails" to enabled from the Preferences should fix these. Unfortunately, this will work only if you have not customized the default Notification and Autoresponder template in which you did.

     

    The only solution for this is to use, the form source code and host it on your server. Then create a custom Javascript that will detect if the quantities of each item are 0 and set the corresponding checkboxes to "unchecked" automatically. Please let us know if you want to consider this approach. Thank you

  • Profile Image

    Answered by RACRUSWAL on January 18, 2014 at 05:09 AM

    Hi Ardy,

    You helped me out before with some Javascript thank you so much!

    The link to the form on my server is http://electronic-specialist.co.uk/FormsArea/form/form.html

    It is important for my client to have no checkbox.  Could you show me how to create the javascript to detect the quantity as 0.

    Thanks so much :-)

    Rachelle

  • Profile Image

    Answered by Cesar on January 18, 2014 at 11:58 AM

    Thank you for your input. On behalf of my colleague once he has an update on what has been previously discussed. He will let you know through this thread. Thank you

  • Profile Image

    Answered by RACRUSWAL on January 19, 2014 at 08:04 AM

    Thans so much Cesar

  • Profile Image

    Answered by RACRUSWAL on January 21, 2014 at 09:14 AM

    Hi Guys,

    You helped me out before with some Javascript thank you so much! 

    The link to the form on my server is http://electronic-specialist.co.uk/FormsArea/form/form.html

    It is important for my client to have no checkbox.  Could you show me how to create the javascript to detect the quantity as 0.

    Thanks so much :-)

    Rachelle

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 21, 2014 at 09:36 AM

    Hello Rachelle, thank you for giving us the webpage. I am almost done with it though it needs bit progress. I will get back to you later this day with the corresponding custom script you needed to make disable the checkboxes automatically when they revert the quantities to 0. I apologize for the delay. Thanks

  • Profile Image

    Answered by RACRUSWAL on January 21, 2014 at 11:01 AM

    Absolutely no problem Ardy thank for your time and attention.

    Rachelle :-)

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 21, 2014 at 11:35 AM

    Hello,

    Rachelle

    Please clone my form as I modified something on an item of your product which causes a glitch and also to match the custom script I will be giving you. Please follow this guide on How to Clone an Embedded Form from a Webpage? in order to clone the form

    After that, please re-embed the form source code from the form you just cloned.

    Then copy and paste this custom script somewhere at the end of the form tag from the very bottom part of the source.



    Please see this demo page so that you can test the output. I removed your CSS that hides the checkboxes here so that you can test the checkboxes.

    If you need further assistance, please do not hesitate to ask. Thank you

  • Profile Image

    Answered by RACRUSWAL on January 22, 2014 at 04:32 AM

    Hi Ardy,

    I have:

    Cloned your form:

    http://form.jotformpro.com/form/40211783851956

    Then clicked Embed - Source.  I copied the source code into TextWrangler.  

    I then added at the head:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>

      <title>Form</title>

     

    I then added near the top of the form ( this code adds the extra fields to the purchase order total):

    <script>

    var dynPOTotal = parseFloat(0);

    function checkPOTotal(){

    dynPOTotal = parseFloat(document.getElementById("payment_total").innerHTML);

    calculateNewTotal();

    }

    function calculateNewTotal(){

     var POTotal = parseFloat(document.getElementById("payment_total").innerHTML);

     if(dynPOTotal != POTotal){

    POTotal = dynPOTotal;

     }

     var Price1 = parseFloat(document.getElementById("input_332").value);

     if(!Price1){

      Price1 = parseFloat(0);

     }

     var Price2 = parseFloat(document.getElementById("input_453").value);

     if(!Price2){

      Price2 = parseFloat(0);

     }

    var Price3 = parseFloat(document.getElementById("input_457").value);

    if(!Price3){

      Price3 = parseFloat(0);

     }

    var Price4 = parseFloat(document.getElementById("input_478").value);

    if(!Price4){

      Price4 = parseFloat(0);

     }

     var DiscountAmt = parseFloat(document.getElementById("input_446").value);

     if(!DiscountAmt){

      DiscountAmt = parseFloat(0);

     }

    var FinalTotal = POTotal + Price1 + Price2 + Price3 + Price4;

    if(FinalTotal == 0.0){

    FinalTotal = 0.0;

     

    }else{

    FinalTotal = FinalTotal - DiscountAmt;

    }

    var controlFTotal = document.getElementById("input_447");

    controlFTotal.value = parseFloat(FinalTotal).toFixed(2);

     

     

     

     

     

    }

    </script>

    I added at the bottom of the form:
      <script>setInterval(function(){checkPOTotal()},1000);</script>
    </form>
    </body>
    </html>
    I then added your new code from the url bellow before the end of the </form>
    http://pastie.org/pastes/8654218/text
    Here is the url: http://www.electronic-specialist.co.uk/FormsArea/newform.html
    I have checked the email submissions and the 0 quantity items are still appearing see screen shot.  
    It is important to my client that no checkboxes appear on the form  
    What have I done wrong?  
    clip
    Thanks,
    Rachelle
  • Profile Image
    JotForm Support

    Answered by NeilVicente on January 22, 2014 at 07:10 AM

    Rachelle,

    I have relayed your message to Ardy so he can help you resolve this problem of yours. He will attend to you when he becomes available.

    Cheers!

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 25, 2014 at 04:35 AM

    Hello Rachelle, I have retested the quantities script for the checkboxes including the previous custom script I made a few weeks ago for the calculation and I don't receive any 0 quantities included when viewing from the Email

     

    Anyway, I modified the custom script and added a function to reset the checkboxes and also set the quantities to 0 when the page loads so it will not AutoFill should in case you have Auto Fill enabled to your form. I think that caused the issue you experienced. I also optimized the code to make it shorter. You may use this new custom script and include it again at the bottom of the form

    Alternatively, I also prepared the whole source code that you can save as HTML file. I already included the calculation and the checkbox script within the source code. You can get the source code from this link

    Please let us know if you require further assistance. Thanks

  • Profile Image

    Answered by RACRUSWAL on January 26, 2014 at 08:36 AM

    Hi Ardy,

    I am really sorry for the confusion.  

    You are correct in saying that the products that have never been selected do not appear on the form, however if a user changes the quantity from 0  to 1 (or any other quantity) and then decides that they dont actuaually want to purchase the product so they change it back to zero, Its only then that the product description and 0 total appear on the submission.  I understand that the check boxes are to stop that from happening but in this case I cant have checkboxes.

    My original question is still - What javascript can I add to the form to stop the 0 quantity Products appearing on the form  submission when on submission the Purchase Order quantities are set to 0.

    My appologies again if I was not clear.

    Thanks for your timew and attention,

    Rachelle

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 26, 2014 at 12:18 PM

    Hello Rachelle,

    It is ok. No need to apologize. We are here to help. I think that is already the main purpose of the script I have given. The script works like this, when the form loads or the page loads it automatically resets all checkboxes and quantities are set to 0. This circumvents the current Autofill you have on the form.

    Also the script unchecks the corresponding checkbox whenever your form users changed their mind and decided to set back a specific product's quantity to 0. Please watch this video.

    What you need to do now is to insert the Custom CSS code again to the form you recently cloned so that it will hide the checkboxes. As I mentioned on my previous post I removed the Custom CSS codes for test purposes only so you will know the checkbox script is working. Here is the old CSS code I removed. Please refer to this user guide How to Inject Custom CSS Codes

    This is the link to the demo page which has the latest revision. Please let us know if you require further assistance. Thank you

  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 26, 2014 at 12:26 PM

    I would like to add that after you have added the old CSS codes, you still need to re-embed and save the form source code to your hosting server and add the custom script to it. Thanks

  • Profile Image

    Answered by RACRUSWAL on January 27, 2014 at 02:35 PM

    Hi Ardy,

    Thank you so much!  Works Fantastic!

    :-) Rachelle