Question

我有一个带有几个按钮的简单HTML表单。在一些帮助下，我已经实现了一个Javascript来处理不同的操作，具体取决于单击了哪个按钮，但是我只是注意到这也会抑制被单击为POST参数的按钮的值。

我需要知道在操作页面上单击的按钮，因为它需要有条件地进行分支。这是我的HTML表单：

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

这是我的Javascript：

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

当我在index.php页面上检查表单值时，我看到以下内容：

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

有谁知道我如何保留脚本的功能，还包括单击作为POST参数的按钮？

Answer 1

或者，您可以添加另一个隐藏的输入以保存单击哪个按钮。简单示例：

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

然后在JS：

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

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

问题是您通过调用e.preventDefault();来阻止按钮单击提交表单。然后，您手动调用表单的提交方法，该方法不知道按钮单击。

一种可能的解决方案是在您真正想要阻止表单提交时使用preventDefault()。

$('#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 - _{如果在代码段中阻止了表单提交，则代码段将无效}

Javascript阻止值提交按钮

3 个答案: