jQuery在提交之前确认

Question

<form action ="/submit-page/" method='post' class="editable">
    <fieldset>
    <select name="status" id='status'>
        <option value="Submitted">Submitted</option>
        <option value="Canceled">Canceled</option>
              <option value="Application">Application</option>
    </select>
          <input type="submit" name="submit" value="SAVE">

</form>

我上面有一个表单:当我点击下拉值"已取消"并点击"保存"按钮时,我想给警告框一个带有"是"和"否"按钮的警告消息.

如果用户单击"是",请根据需要将其带到表单操作参数中的提交页面.如果用户单击"否",则保留在同一表单页面上而不刷新页面.这可以在jQuery中完成吗？

Answer 1

嗯......这里的其他答案存在问题:它们不适用于您的HTML.

有一个在jQuery的(我认为这是一个错误),如果你的表格上一个元素有一个地方的错误name的submit,则触发submit该形态的情况下将无法正常工作.

您需要name从input type="submit"按钮中删除该属性,或者只是为其命名,而不是"提交".

HTML

<form action ="/submit-page/" method='post' class="editable">
  <fieldset>
    <select name="status" id='status'>
      <option value="Submitted">Submitted</option>
      <option value="Canceled">Canceled</option>
      <option value="Application">Application</option>
    </select>
    <input type="submit" value="SAVE" name="submit-button"/>
  </fieldset>
</form>?

jQuery的

$('#status').on('change', function() {

    var $this = $(this),
        val = $this.val();

    if (val === 'Canceled' && confirm("are you sure?")) {
        $this.closest('form').submit();
    }
});?

PHP

$submitted = !empty($_POST['submit-button']);

if($submitted)
{
    // Submit button was pressed.
}
else
{
    // Form was submitted via alternate trigger.
}

例

工作:http://jsfiddle.net/xixonia/KW5jp/

不工作:http://jsfiddle.net/xixonia/KW5jp/1/

编辑

您已经更新了您的问题,这个答案不再是您正在寻找的有效解决方案.相反,看看克里斯普拉特的答案.

再次编辑

这是Chris Platt答案的修改版本.在执行第一个包含的逻辑之前,它只是等待DOM准备就绪(元素被加载)$(...).

$(function() { // this first jQuery object ensures that...

    /// ... the code inside executes *after* the DOM is ready.

    $('form.editable').submit(function(){
        if ($('#status').val()=='Canceled') {
            if (!confirm('Warning message here. Continue?')) {
                return false;
            }
        }
    });

});