Question

我正在尝试获取表单数据并将其作为JSON传递给我的模态对话框，该对话框也应该在“提交”按钮上打开！

这是我到目前为止所做的：

HTML

<form class="form-horizontal" id="configuration-form">
--unimportant--
<button type="submit" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
</form>

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Please copy this code to your HTML</h4>
                </div>
                <div class="modal-body">
                    <code id="configurationObject"></code><br/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>  
        </div>
    </div>

JS

(function(formId) {
    $("#" + formId).submit(function(event){
        event.preventDefault();
        var errMsg = "Something went wrong with form submit, please try again";
        var json = convertFormToJSON(this); //here I got my json object with all my form data


        $.ajax({
            type : 'POST',
            data: {conf: JSON.stringify(json)},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success : function(data){
                $("#configurationObject").html(data);
            },
            failure: function(errMsg) {
                alert(errMsg);
            }
        });

        return false;
    });
})("configuration-form");

单击“提交”按钮后，我会获得包含表单数据的JSON对象（我可以在

之后记录它）

var json = convertFormToJSON（this）

我的模态对话框窗口打开了，但我确实想念我的数据。 id =“configurationObject”的元素为空。

提前致谢

Answer 1

您是否尝试将数据附加到#configurationObject而不是使用html（）？

Answer 2

根据文档$.html()接受A string of HTML to set as the content of each matched element.。

这里传递json data而不是字符串。首先，您必须将json响应转换为字符串。 $("#configurationObject").html(JSON.stringify(data));

或者您可以使用

$("#configurationObject").append(data);

获取表单值并将其传递给Submit上的Bootstrap模式

2 个答案: