php - 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 中有一个错误(我假设它是一个错误)，如果您的表单上的元素具有 submit 的 name，则触发 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's answer .

再次编辑

这是 Chris Platt's answer 的修改版本.它只是等待 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;
            }
        }
    });

});