CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Codinga
Codinga

Reputation: 620

Call ajax on submit form in bootstrap modal

I have a button add with a form that i show with bootstrap modal like that :

$table.on('click', 'button#add', function() {      
    jQuery('#add_div').modal('show', {backdrop: 'static'});
    $('form#add_form').on('click', 'button#submit', function() {
       var field1 = (get inserted data on field1);
       alert(field1);

    });

});

The form that i show in the modal :

<!-- Modal 6 (Long Modal)-->
<div class="modal fade" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal Content is Responsive</h4>
            </div>

            <div class="modal-body">
            <form action="" method="post" id="add_form">

                <div class="row">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label for="field-1" class="control-label">Name</label>

                            <input type="text" class="form-control" id="field1" name="field1" placeholder="">
                        </div>  

                    </div>
                </div>
            </div>  

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="submit" type="button" class="btn btn-info">Save changes</button>
            </div>
        </form>
        </div>
    </div>
</div>

The probleme is that i don't know how to make it work in javascript. By clicking this button the modal is up but when i submit the form nothing hapen even if i comment this var field1 = (get inserted data on field1); and replace it with this var field1 = "submited";

Upvotes: 0

Views: 5859

Answers (1)

Aotik
Aotik

Reputation: 348

Change 

<button type="button" class="btn btn-info">Save changes</button>

to

<button id="btnSubmitModal" type="button" class="btn btn-info">Save changes</button>

and add in a click function in your JS script

$( "#btnSubmitModal" ).click(function() {
  var field1value = $( "#field1" ).val()
  alert( "Modal submitted with text: " + field1value);
});

Upvotes: 4

Related Questions