javascript - 获取表单值并将其传递给提交时的 Bootstrap 模式

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()？