jQuery在提交之前确认 [英] jQuery Confirm Before Submit

问题描述

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

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

I have a form above: When I click on the drop down value "Canceled" and hit the Save button I want to give alert box with a warning message with a Yes and No button.

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

If the user cicks on Yes, take him to the submit-page as desired in the form action parameter. if the user clicks No, stay on the same form page without refreshing the page. Can this be done in jQuery?

推荐答案

嗯......这里的其他答案都有问题：它们不会对你的HTML起作用。

Hmm... theres is a problem with the other answers on here: they don't work against your HTML.

jQuery中有一个错误（我认为这是一个错误），如果表单上的元素有名称 提交，然后触发表单的 submit 事件

There's a bug in jQuery (I assume it's a bug), where if an element on your form has aname of submit, then triggering the submit event of the form will not work.

您需要从输入类型=中删除名称属性提交按钮或只是给它一个提交以外的名称。

You will need to remove the name attribute from your input type="submit" button or simply give it a name other than "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 /

编辑

Edit

您已经更新了您的问题，这个答案不再是您正在寻找的有效解决方案。相反，请查看 Chris Platt的回答。

You have since updated your question, and this answer is no longer a valid solution for what you are looking for. Instead, look at Chris Platt's answer.

再次编辑

Edit Again

这是 Chris Platt的回答。在执行第一个 $（...）中包含的逻辑之前，它只是等待DOM准备就绪（元素被加载）。

This is a modified version of Chris Platt's answer. It simply waits until the DOM is ready (elements are loaded) before it executes the logic contained within the first $(...).

$(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;
            }
        }
    });

});

这篇关于jQuery在提交之前确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！