我花了几天时间才走到这一步,我希望有人能在最后阶段帮助我。我在模式中有一个表单,我希望使用 ajax 将其发布到 php 文件。我是 jquery 的新手,我正在尝试弄清楚如何让这两个 jquery 一起工作。
参见fiddle
表单和模态
<a href="#my_modal" data-toggle="modal" data-review="submit this information to database">Open Modal</a>
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal header</h4>
</div>
<div class="modal-body">
<form>
<p>some content</p>
<input type="text" name="review" value=""/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Jquery
//Variable is passed to modal
$('#my_modal').on('show.bs.modal', function(e) {
var review = $(e.relatedTarget).data('review');
$(e.currentTarget).find('input[name="review"]').val(review);
});
//Now post my form with the following ajax code when Modal Submit button is pressed.
$.post('insert.php', {review: review},
function(data){
$('#myModal').modal('hide');
$("#message").html(data);
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
最佳答案
将模态页脚和模态正文保留在表单标记内。 添加id到提交按钮,然后进行ajax调用。
$("#submitButtonId").on("click",function(){
//Ajax call here
}
关于javascript - 如何使用ajax从模态提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34545071/