CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapmodal-dialog
Renier
Renier

Reputation: 1535

How to use a Bootstrap modal to add fields to a form using jQuery

I have a form on a Bootstrap modal that captures employment history info. I want to be able, when the user clicks save on the modal the data the user just entered, display on a form.

Consider the following:

<form name="stuff">
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    add position
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="false">
                &times;
            </button>
            <h3 class="modal-title" id="myModalLabel">add Position</h3>
        </div>
        <div class="modal-body">
            <form name="modal-form" class="form-horizontal">
                <!-- form stuff goes here -->
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
            <button type="button" type="submit" class="btn btn-primary">
                Save
            </button>
        </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- after save button data entered on modal goes here i.e. -->
     <input type="text" disabled name="job_title[] value="Software Developer" />
     <input type="text" disabled name="from[] value="November 2013" />  &ndash; <input type="text" disabled name="to[] value="present" /> <input type="text" disabled name="total experience[] value="2 months" /> 
     <input type="text" disabled name="industries[] value="IT" /> 
</form>

What I need is after the user clicks save on the modal it displays in the fields as shown above. Can this be done using jQuery? If not, how can I accomplish this?

I have tried searching the web for clues on how to do this, but I don't think I have the correct key words, because I can't find any thing.

Just in case the code example in unclear:
First the user clicks a button to make the modal appear, they then fill out form that is on the modal, and when they click save on the modal, the data entered on the modal displays at the bottom of the form, underneath the button to make the modal appear.

Upvotes: 2

Views: 4944

Answers (1)

Godinall
Godinall

Reputation: 2290

See this demo http://jsfiddle.net/Godinall/5Vx8g/ You need to add an ID to that button for jquery to select.

id="save"

The rest is quite straight forward.

Upvotes: 4

Related Questions