jQuery在提交前确认
jQuery在提交前确认
提问于 2012-02-25 02:38:38
<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>我有一个上面的表单:当我点击下拉值“取消”并点击保存按钮时，我想给出一个警告框，其中有一个带有是和否按钮的警告消息。
如果用户单击Yes，则将他带到表单操作参数中所需的提交页面。如果用户单击“否”，则停留在同一表单页上，而不刷新该页。这可以在jQuery中完成吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-02-25 02:56:14
嗯..。这里的其他答案有一个问题:它们不适用于您的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'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;
}
}
});
});Stack Overflow用户
发布于 2012-02-25 02:44:00
$('form.editable').submit(function(){
if ($('#status').val()=='Canceled') {
if (!confirm('Warning message here. Continue?')) {
return false;
}
}
});Stack Overflow用户
发布于 2012-02-25 02:42:05
是的，可以这样做：
$('#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的解决方案相反，只要您更改下拉框中的选定值，就可以完成此操作。只要你点击提交按钮，他就会做到这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9436199
复制相关文章
相似问题
腾讯云开发者
