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

I'm trying to get my form data and pass it as JSON to my modal dialog, which also should open on Submit button!

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

Here is what I've done so far:

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

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>

(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");

After Submit button is clicked I do get my JSON object with form data (I can log it after

单击“提交”按钮后,我会获取带有表单数据的JSON对象(我可以在之后进行登录

var json = convertFormToJSON(this)

var json = convertFormToJSON(this)

and my modal dialog window is opened, but I do miss my data aka. element with id="configurationObject" is empty.

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

Thanks in advance

提前致谢

2 个解决方案

#1

According to documentation $.html() accepts A string of HTML to set as the content of each matched element. .

根据文档$ .html()接受一个HTML字符串来设置为每个匹配元素的内容。。

Here you are passing json data instead of string. So first, you have to convert json response to string. $("#configurationObject").html(JSON.stringify(data));

这里传递json数据而不是字符串。首先,您必须将json响应转换为字符串。 $( “#configurationObject”)HTML(JSON.stringify(数据))。

or you can use

或者你可以使用

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

#2

Have you tried to append() the data to #configurationObject rather than using html()?

您是否尝试将数据附加到#configurationObject而不是使用html()?

#1