jQuery确认对话框内容未在表单更改时更新

时间:2018-07-11 02:01:53

标签: jquery jquery-confirm

我目前在jquery-confirm插件上遇到问题,无法动态更改内容。

基本上,我希望做的是列出在jquery-confirm对话框的内容内填充的表单输入的所有内容。

但是,由于jquery-confirm的初始化发生在文档就绪事件中,因此内容仅检索表单输入的初始状态。

这是我正在使用的代码

 $(document).ready(function() {
        $(".confirm").confirm({
            title: 'Submit the Form?',
            content: 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> ',
            buttons: {
                formSubmit: {
                    text: 'Submit',
                    action: function () {
                        $('#myForm').submit();
                    }
                },
                cancel: function () {
                    //close
                }
            }

        }); 
});

问题是,无论我对表单输入进行什么更新,更改都不会显示在jquery-confirm的内容内。内容始终显示表单输入的初始状态。

我尝试将确认初始化附加在单击表单的按钮上,以尝试捕获更改,但这仍然无济于事。

谁能告诉我如何正确地将表单的值绑定到jquery-confirm的内容中?

编辑:(包括HTML表单的简化版)

  <form id="myForm"  method="post" action="/processThisForm" >
      <select id="formSelect" name="formSelect" >
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
      </select>
      <input type="text" id="formInput" />
      <button class="confirm">Save</button>
   </form>

编辑2:

为此代码创建了一个jsfiddle

https://jsfiddle.net/uxfb8myp/2/

1 个答案:

答案 0 :(得分:2)

使用content更新您的function字段分配,如下所示。

content: function() { 
    return 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> '
},

您完整的$(".confirm").confirm()应该如下。

$(document).ready(function() {
    $(".confirm").confirm({
        title: 'Submit the Form?',
        content: function() { 
            return 'Form Select Value:' + $("#formSelect option:selected").text() +' <br />  Form Input Value: '+  $("#formInput").val() +' <br /> '
        },
        buttons: {
            formSubmit: {
                text: 'Submit',
                action: function () {
                    $('#myForm').submit();
                }
            },
            cancel: function () {
                //close
            }
        }
    }); 
});