在引导模态中的提交表单上调用ajax

Question

我有一个按钮添加与我用引导模态显示的形式，像这样：

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

    });

});

我在模态中显示的形式：

<!-- 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>

问题是我不知道如何使其在javascript中工作。 通过单击此按钮，模式已启动，但是当我提交表单时，即使我注释了此var field1 =（在field1上获取插入的数据），也没有任何阴影。 并将其替换为此var field1 =“ submited”;

Answer 1

更改

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

至

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

并在您的JS脚本中添加一个click函数

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