Get form values and pass it to Bootstrap modal on Submit

Question

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

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>

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

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

var json = convertFormToJSON(this)

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

Thanks in advance

Try to see the output of $("#configurationObject").html(data); before using it in success block. Once you capture the output before making the call, use it inside success block. Give it a try and see if this works or not. — Samundra
– Samundra, Commented Apr 4, 2016 at 13:59
Yep, I found similar solution by just doing $("#configurationObject").html(JSON.stringify(json)); before ajax call. I think I'll leave it this way. Thanks! — Prpaa
– Prpaa, Commented Apr 4, 2016 at 14:20

user2205967 · Accepted Answer · 2016-04-04 14:14:00Z

1

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

answered Apr 4, 2016 at 14:14

user2205967

581 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faisal Ahsan · Accepted Answer · 2016-04-04 14:34:52Z

0

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

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

or you can use

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

answered Apr 4, 2016 at 14:34

Faisal Ahsan

9381 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Get form values and pass it to Bootstrap modal on Submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related