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'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; } } }); });

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。

jQuery在提交之前确认

4 个答案: