Question

我已经安装了bPopup并在main.php页面上配置了一个简单的弹出窗口：

  $('#element_to_pop_up').bPopup({
              contentContainer:'.content', 
              loadUrl: 'test.php', 
              onClose: function(){ 
                  var name = $('#name').val();
                  console.log(name)
              }
  });

按下按钮时会显示#element_to_pop_up并加载test.php。 test.php包含：

SITE<br/>
NAME <input type='text' id='name' name='name' value=''><br/>
ID <input type='text' id='idd' name='idd' value=''><br/>
DESC <input type='text' id='desc' name='desc' value=''><br/>
<input type='submit' class="b-close" />

当按下关闭按钮时，弹出窗口关闭，我的console.log确实显示name的值

我想做的是

close按钮关闭弹出窗口，不用传回值
一个单独的提交按钮，将表单提交给数据库，关闭弹出窗口并将3个值返回给父OnClose函数。

到目前为止，我已经创建了一个显示代码的codePen。

任何人都知道如何做到这一点？

由于

如果有帮助，我很乐意考虑使用其他插件。

Answer 1

在test.php中添加两个ID为

的按钮

<input type='button' class="b-close" id='close' value='close'/>
<input type='button' class="b-close" id='save' value='save'/>

更改onClose函数以检测选择了哪个按钮，然后设置onClose函数以使用它。

 onClose: function(){ 
    var val = $(document.activeElement).attr('id'); // ID of selected button
    console.log (val)

    if ( val == 'close') { // close popup
       return false;
    }

    var name = $('#name').val(); // return values.
       console.log(name)
    }
}

新codePen显示了这一点。打开笔的控制台日志，启动弹出窗口并输入您的姓名。

如果单击“保存”，则应在控制台中显示您的姓名。如果单击“关闭”，则应在控制台中显示“关闭”。

希望这有帮助。

弹出窗口 - 打开表单，提交数据并返回选定的值

1 个答案: