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事件將不起作用。

您將需要從input type="submit"按鈕中刪除name屬性，或者簡單地為其指定一個不同於“ 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）的答案 。

重新編輯

這是克里斯·普拉特 （ 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;
            }
        }
    });

});

Answer 2

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

Answer 3

是的，可以這樣做：

$('#status').change(function(){
   var val = $(this).val();
   if( val == 'Submitted' ) {
     $('.editable').submit();
     return false;
   } else if (val == 'Canceled')
   {
      var answer = confirm('are you sure');
      return false;
   } else {
    ... 
   }
});

與Chris Pratts解決方案相反，此操作將在您更改下拉框中的所選值后立即執行。 一旦您單擊提交按鈕，他的工作便會完成。

Answer 4

截取jQuery中表單提交的最直接方法是這樣的：

$("form.editable").submit(function(){
    if(confirm("Really submit the form?")) {
        return true;
    } else {
        return false; //form will not be sumitted and page will not reload
    }
});

有關更多詳細信息，請參見http://jqapi.com/#p=submit 。