Prevent empty form submissions in multi-add-to-cart forms

Forum Forums Tutorials Prevent empty form submissions in multi-add-to-cart forms

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 11 years, 12 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48718

    Anonymous
    Participant

    If you create a multi-add-to-cart form that allows a customer to add an empty order to the cart, the customer will receive a shopping cart error that could lose a sale. To prevent these errors, you will need to add javascript-based form validation to your multi-add-to-cart form, preventing empty orders from being submitted.

    Here is the procedure for adding empty cart validation to your multi-add-to-cart forms:

    1. Edit your opening add-to-cart

    element to have a name and onsubmit attribute as follows:

     

    <form name="add" action="http://www.your_domain.com/cgi-your_domain/sb/order.cgi" onsubmit="return(validateForm())" />
    
    

     

    2. Add the following Javascript to theregion of your page:

     

    <script type="text/javascript"> 
     function validateForm(){ 
     
       if (document.add.itemnum.length) { 
            for(n=0; n<document.add.itemnum.length; n++){ 
                    if(document.add.itemnum[n].checked == true){ 
                          return true; 
                    } 
            } 
       } 
       else { 
             if(document.add.itemnum.checked == true){ 
                     return true; 
             } 
       } 
            alert("Please select at least one item to add to the cart."); 
            return false; 
     } 
     </script> 
    
    

     

    3. (optional) Customize the text that is displayed if a customer tries to add an empty form to the cart in (be careful not to delete either of the double-quotes):

     

    alert("Please select at least one item to add to the cart.")
    
    

     

    4. Make certain that the “name” attribute of your form (

     

    <form name="add" ... /> 
     . 
     . 
     . 
     <script type="text/javascript"> 
     function validateForm(){ 
     
       if (document.add.itemnum.length) { 
            for(n=0; n<document.add.itemnum.length; n++){ 
                    if(document.add.itemnum[n].checked == true){ 
                          return true; 
                    } 
            } 
       } 
       else { 
             if(document.add.itemnum.checked == true){ 
                     return true; 
             } 
     . 
     . 
     . 
    
    

     

    Now your multi-add-to-cart form will not allow blank forms to be submitted to the cart, and will notify customers that they have not selected anything if they try to.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.