ansaurus

Question

how to disable form submit and check the form

Answer 1

+2 A:

Your function needs to return false to cancel the submission or true to proceed. That's why your onsubmit form attribute is set to "return XXX()" rather than just "XXX()"

Vinay Sajip 2009-07-13 20:15:20

Answer 2

+3 A:

Your javascript looks correct. I think the only you should need to do is return false; on your if (totalChecked > 4) statement.

Edit: Here's the section of your javascript function to modify:

if (totalChecked > 4) {
    alert("You can only choose up to Max of 4 Toppings");   
    return false;
} else {    
    itemPrice = itemPrice + (totalChecked * 0.99);  
    document.getElementById('my-item-name').value = toppings.join("\t");
    document.getElementById('my-item-id').value = randomNumber;
    document.getElementById('my-item-price').value = itemPrice;
    return true;
}

CAbbott 2009-07-13 20:16:12

Hi, thanks for advice, but where should the return false be?I tried to use it but it doesn't work.

2009-07-13 20:18:41

Answer 3

+1 A:

As mentioned, you should return false from your check function to cancel the submit, and true if the check is okay.

How about something like this?

    <html>
 <head>
  <title>Pizza Order Form</title>
 </head>
 <body>
  <script>
   function SetHiddenFieldValue() {
    var totalChecked = 0;
    var itemPrice = 5.99;
    var toppings = new Array();
    var randomNumber = Math.floor((Math.random() * 9000) + 100);
    var checks = document.getElementsByName('topping');

    for (i = 0; i < checks.length; i++) {
     if (checks[i].checked) {
      toppings[i] = checks[i].value;
      totalChecked += 1;
     }
    }

    if (totalChecked > 4) {
     alert("You can only choose up to Max of 4 Toppings");
     return false;
    }
    else {
     itemPrice = itemPrice + (totalChecked * 0.99);
     document.getElementById('my-item-name').value = toppings.join("\t");
     document.getElementById('my-item-id').value = randomNumber;
     document.getElementById('my-item-price').value = itemPrice;
     return true;
    }
   }
  </script>
  <form id="pizza" name="pizza" method="post" action="" class="jcart" onsubmit="return SetHiddenFieldValue();">
   <input type="hidden" name="my-item-id" id="my-item-id" value="" />
   <input type="hidden" name="my-item-name" id="my-item-name" value="" />
   <input type="hidden" name="my-item-price" id="my-item-price" value="" />
   <input type="hidden" name="my-item-qty" value="1" />
   <div id="toppings">
    <input type="checkbox" name="topping" id="pepperoni" />Pepperoni
    <input type="checkbox" name="topping" id="tomato" />Tomato
    <input type="checkbox" name="topping" id="mushrooms" />Mushrooms
    <input type="checkbox" name="topping" id="peppers" />Peppers
    <input type="checkbox" name="topping" id="olives" />Olives
   </div>
   <input type="submit" name="my-add-button" value=" Add " />
  </form>
 </body>
</html>

Synetech inc. 2009-07-13 21:07:52

ansaurus

tags:

views:

answers:

how to disable form submit and check the form

related questions