JQUERY模态框确认表单提交

JQUERY modal box confirm form submit

本文关键字：表单提交 确认 模态 JQUERY      更新时间：2023-09-26

我有一个表单，当提交是点击我想要一个模态框弹出一个是和否按钮我想要这两个是和否按钮提交表单，但我需要知道他们点击了哪个按钮。

我的代码

<input onclick="$.msgbox('confirm text',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {
});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

我的问题是表单提交时，用户点击提交。

任何帮助或想法将是伟大的

谢谢

虽然我不熟悉$.msgbox插件，但你应该在<form>提交上打开模态对话框，而不是按下按钮，因为表单也可以通过输入/返回某些输入字段(如<input type="text|password">文本框)提交

var confirmed = false;
$('#myform').bind('submit', function() {
  if (confirmed) {
    return true;  // confirmation received, continue form submission process
  } else {
    $.msgbox(
      'my modal message',
      {
        buttons : [
          { type: 'button', value: 'YES' },
          { type: 'button', value: 'NO' }
        ]
      }, 
      function(buttonPressed) {
        confirmed = buttonPressed.value;  // Update the confirmed variable
        $('#myform').submit();  // re-submit the form
      }
    );  
    return false;  // cancel form submission
  }
});

添加返回false:

<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {
}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

对msgbox也不确定，但对您的代码有一些评论:

  1. 不要将JS逻辑直接附加到代码中，而是使用jQuery将click事件附加到标记中(参见unobtrusive javascript):

    代替

    <input onclick="$.msgbox('confirm text',{
    使用

    $('#btnApply').click(function(e) {

  2. 您可以通过设置事件参数的一个属性为false来停止点击处理:

    $('#btnApply').click(function(e) {
     e.preventDefault(); // stop click handling and so form submitting

  3. 最后，在msgbox回调函数中处理表单提交与否:

    $.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
    {
    type: "submit",
    value: "Yes"},
{
    type: "submit",
    value: "No"},
{
    type: "cancel",
    value: "Cancel"}
]
}, function(result) {
    if(result == "Yes") // display the form on submit
         $('form').submit();
});

jsFiddle可用。

相关文章：