jQuery的确认之前提交

<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的确认之前提交

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

来源

2012-02-24 newbie

你应该已经张贴此作为答案:)我是很想... – mindandmedia 2012-02-24 18:45:49

教程这里：模态确认对话框上的表单提交（http://www.jensbits.com/2009/08/10 /莫代尔 - 认可 - 对话框上形式提交，JavaScript的jQuery的UI和-ThickBox的品种/）。它包含一个普通的js例子。 – 2012-02-24 18:46:15

你的意思是一个确认框喜欢这里提到的：http://www.w3schools.com/js/js_popup.asp 或者类似的东西：http://forum.jquery.com/topic/jquery-confirm-box – 2012-02-24 18:40:39

嗯...这是其他答案的问题在这里：他们不对你的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. 
}

考试PLE

工作：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; 
      } 
     } 
    }); 

});

来源

2012-02-24 18:56:13

@克里斯托弗..如果我删除名称，将如何检查在服务器端的提交按钮被按下：例如，如果我想要检查 if（！empty（$ _ POST ['submit']）） – newbie 2012-02-24 19:03:24

您可以简单地*改变*名称。它不需要完全删除。我已经更新了我的答案以反映这一点。 – 2012-02-24 19:14:22

我试过克里斯普拉特的答案..但它不工作在这个网站上： http://srikanthrajan.com/test/ 我试过包括不同的jquery库，但它不起作用 – newbie 2012-02-24 21:54:28

是的，这是可以做到：

$('#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 { 
    ... 
    } 
});

这一点，而不是克里斯·普拉茨解决方案将做到这一点，只要你改变在下拉框中选择的值。一旦你点击提交按钮，他会做到这一点。

来源

2012-02-24 18:42:05 mindandmedia

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

来源

2012-02-24 18:43:59

这不是用户所要求的。 – 2012-02-24 18:57:49

这是用户要求的一种解释。他的问题标题是“提交表单后”。 – 2012-02-24 19:05:36

谢谢大家..克里斯普拉特解决方案似乎是我目前的情况的理想..但它不工作..当我点击保存按钮它不会生成警告消息，如果状态是'取消'.. – newbie 2012-02-24 19:27:24

最直接的方法来拦截在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。

来源

2012-02-24 18:47:12 pykid

jQuery的确认之前提交

回答

相关问题