자바 스크립트 차단 값에서 제출 버튼

Question

몇 가지 버튼이있는 간단한 HTML 양식이 있습니다. 어떤 도움을 받아 어떤 버튼을 클릭했는지에 따라 다른 액션을 처리하는 자바 스크립트를 구현했지만, POST 매개 변수로 클릭 한 버튼의 값을 표시하지 않는 것으로 나타났습니다.

결과적으로 조건부로 분기해야하므로 작업 페이지에서 클릭 한 버튼을 알아야합니다. 내 자바 스크립트

<form role="form" action="index.php?action=updateItem" id="review" method="post"> 
    <input type="hidden" name="itemID" value="CBE21852-FF46-5F43-8A59-C59AAE865F28"> 

    <div class="checkbox"> 
     <label class="checkbox"><input type="checkbox" name="ticked" value="ticked" id="ticked" required></label> 
    </div> 
    <p>Quantities are correct<br>Size and orienation is correct<br> 
    <hr> 

    <button type="submit" class="btn btn-default" name="buttonType" id="Revision" value="PDF-proof">Revision</button> 
    <button type="submit" class="btn btn-default" name="buttonType" id="Approved" value="Approved">Approved</button> 
</form> 

과 여기에 : 여기 내 HTML 양식의

Array 
(
    [action] => updateItem 
    [itemID] => CBE21852-FF46-5F43-8A59-C59AAE865F28 
    [ticked] => ticked 
) 

: 내가 볼 모두 다음은 index.php를 페이지의 양식 값을 확인

<script> 
$(document).ready(function() { 
    $('#review button[type="submit"]').click(function(e){ 
     e.preventDefault();         // this for prevent form from submit 

     if($(this).val() == "Approved"){     // check if third button was clicked 
      if($('#review #ticked').is(':checked')){  // check if checkbox is checked 
       $('#review').submit();      // submit form 
      }else{ 
       alert("Please tick the checkbox before approving"); 
      } 
     }else{            // any other button 
      $('#review').submit(); 
     } 
    }); 

    $("#rejectReason").validate({ 
     errorClass: "has-error" 
    }); 
}); 
</script> 

누구든지 스크립트의 기능을 유지할 수 있지만 POST 매개 변수로 클릭 한 단추를 포함하는 방법을 알고 있습니까?

Answer 1

문제는 당신이 e.preventDefault();를 호출하여 버튼 클릭에서 양식 제출을 방지하는 것입니다의 이름을 변경해야합니다. 그런 다음 버튼 클릭에 대해 알지 못하는 양식의 submit 메소드를 수동으로 호출하고 있습니다.

가능한 해결 방법은 양식 제출을 정말로 막고 싶을 때 을 사용하는 것입니다. 당신이 검증 프레임 워크를 사용하고 있기 때문에

$('#review button[type="submit"]').click(function (e) { 
    if ($(this).val() == "Approved") { // check if third button was clicked 
     if (!$('#ticked').is(':checked')) { // check if checkbox is checked 
      alert("Please tick the checkbox before approving"); 
      e.preventDefault(); // this for prevent form from submit 
     } 
    } 
}); 

---

, 나는 그것을 변경 될 수 있습니다

$(function() { 
 
    $('#review button[type="submit"]').click(function(e) { 
 
    $('#buttonType').val(this.value) 
 
    }); 
 
    $("#review").validate({ 
 
    rules: { 
 
     ticked: { 
 
     required: function() { 
 
      return $('#buttonType').val() == 'Approved'; 
 
     } 
 
     } 
 
    }, 
 
    messages: { 
 
     ticked: { 
 
     required: 'Please tick the checkbox' 
 
     } 
 
    }, 
 
    errorClass: "has-error" 
 
    }); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 

 
<form role="form" action="index.php?action=updateItem" id="review" method="post" novalidate> 
 
    <input type="hidden" name="itemID" value="CBE21852-FF46-5F43-8A59-C59AAE865F28"> 
 

 
    <div class="checkbox"> 
 
    <label class="checkbox"> 
 
     <input type="checkbox" name="ticked" value="ticked" id="ticked" required> 
 
    </label> 
 
    </div> 
 
    <p>Quantities are correct 
 
    <br>Size and orienation is correct 
 
    <br> 
 
    <hr> 
 

 
    <input name="buttonType" type="hidden" id="buttonType" /> 
 
    <button type="submit" class="btn btn-default" name="buttonType" id="Revision" value="PDF-proof">Revision</button> 
 
    <button type="submit" class="btn btn-default" name="buttonType" id="Approved" value="Approved">Approved</button> 
 
</form>

데모 : Fiddle- _{코드 조각 때문에 형식은 작동하지 않습니다 스 니펫에서 차단 된 경우 제출합니다.}

Answer 2

당신은 '제출'=이 입력 유형 위하여 버튼

<input type="submit" class="btn btn-default" name="buttonType1" id="Revision" value="PDF-proof"> 
<input type="submit" class="btn btn-default" name="buttonType2" id="Approved" value="Approved"> 

Answer 3

또는 다른 버튼을 클릭하여 클릭 한 상태로 유지할 수 있습니다. 간단한 예 : JS에이어서

<form role="form" action="" id="review" method="post"> 
    <input type="hidden" name="itemID" value="CBE21852-FF46-5F43-8A59-C59AAE865F28"> 
    <input type="hidden" name="action" /> <!-- container --> 

    <div class="checkbox"><label class="checkbox"><input type="checkbox" name="ticked" value="ticked" id="ticked" required></label></div> 
    <p>Quantities are correct<br>Size and orienation is correct<br> 
    <hr> 

    <button type="submit" class="btn btn-default" name="buttonType" id="Revision" value="PDF-proof">Revision</button> 
    <button type="submit" class="btn btn-default" name="buttonType" id="Approved" value="Approved">Approved</button> 
</form> 

:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#review button[type="submit"]').click(function(e){ 

    e.preventDefault(); // this for prevent form from submit 
    $('input[name="action"]').attr('value', $(this).attr('id')); // assign the action made 

    if($(this).val() == "Approved"){     // check if third button was clicked 
     if($('#review #ticked').is(':checked')){ // check if checkbox is checked 
      $('#review').submit();     // submit form 
     } else { 
      alert("Please tick the checkbox before approving"); 
     } 
    }else{           // any other button 
     $('#review').submit(); 
    } 
    }); 

    $("#rejectReason").validate({ 
     errorClass: "has-error" 
    }); 
}); 
</script>