양식 제출을 사용 중지하고 양식을 확인하는 방법

다음 코드가 있습니다. 내 양식에서 체크 된 체크 박스의 수를 확인하고, 폼이 4 개 이하이고 오류가 더 많이 표시되고 제출하지 않는 경우 확인해야합니다. 양식 제출을 사용 중지하고 양식을 확인하는 방법

function SetHiddenFieldValue() 
{ 
    var checks = document.getElementById('toppings').getElementsByTagName('input'); 
    var toppings = new Array(); 
    var randomNumber = Math.floor((Math.random() * 9000) + 100); 
    var totalChecked = 0; 
    var itemPrice = 5.99; 

    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"); 
    } 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; 
    }

그리고 내 양식은 다음과 같습니다

<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" /> 
    <input type="submit" name="my-add-button" value=" add " /> 
</form>

어떤 도움을 주시면 감사하겠습니다.

출처

2009-07-13 Anonymous

제출을 취소하려면 함수가 false을 반환해야하고 진행하려면 true을 반환해야합니다. 그렇기 때문에 onsubmit 양식 속성이 "XXX()"이 아닌

출처

2009-07-13 20:15:20

으로 바뀌 었습니다. 귀하의 자바 스크립트가 정확한 것처럼 보입니다. 당신이해야 할 일은 오직 입니다. () if (totalChecked> 4) 문.

편집 : 여기 당신의 자바 스크립트 함수의 섹션을 수정할 수있다 : 언급 한 바와 같이 검사가 괜찮 경우

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; 
}

출처

2009-07-13 20:16:12 CAbbott

안녕하세요, 조언을 주셔서 감사합니다. 사용하려고했지만 작동하지 않습니다. –

, 당신은 제출 취소 수표 함수에서 false를 반환하고, 진정한해야한다.

어때?

<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>

출처

2009-07-13 21:07:52 Synetech

양식 제출을 사용 중지하고 양식을 확인하는 방법

답변

관련 문제