[英]get data From Bootstrap 3 modal form with jquery ajax
i wrote this to get form data and post it to a php page and do some proccess and get back a result to me,i start with getting post data from my bootstrap modal form and i found that the script can't take values from modal form,because the php part i can't upload it to fiddle or somewhere else. 我写这是为了获取表单数据并将其发布到php页面上,并进行一些处理并将结果返回给我,我首先从我的引导模态表单获取发布数据,然后发现脚本无法从模态获取值形式,因为php部分我无法将其上传到小提琴或其他地方。
i upload it on my server for rapid review 我将其上传到我的服务器上以便快速查看
click on compose; 点击撰写;
here is the modal code: 这是模式代码:
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Compose</h4> </div> <div class="modal-body"> <form id="sendmail" data-async method="post" role="form" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2" for="inputTo">To</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputTo" placeholder="comma separated list of recipients"> </div> </div> <div class="form-group"> <label class="col-sm-2" for="inputSubject">Subject</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSubject" placeholder="subject"> </div> </div> <div class="form-group"> <label class="col-sm-12" for="inputBody">Message</label> <div class="col-sm-12"> <textarea class="form-control" id="inputBody" rows="18"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" value="Submit">Send</button> <div id='response'></div> </div> </form> </div> </div> </div>
jQuery: jQuery的:
$(document).ready(function () { $('#sendmail').submit(function () { $('#response').html("<b>Loading response...</b>"); $.ajax({ type: 'POST', url: 'proccess.php', data: $(this).serialize() }) .done(function (data) { $('#response').html(data); }) .fail(function () { alert("Posting failed."); }); return false; }); });
Simple PHP Code: 简单的PHP代码:
print_r($_POST);
In your code, this
which is provided inside the $.ajax method's object refers ajax object. 在你的代码,
this
其中的$就法的对象的内部设置是指Ajax对象。 And it seems that you need to refer to the form from which you have to get the data and serialise it and send it into AJAX request. 似乎您需要引用必须从中获取数据并对其进行序列化并将其发送到AJAX请求的表单。
Try following code, 尝试以下代码,
$(document).ready(function () {
$('#sendmail').submit(function () {
var that = this;
$('#response').html("<b>Loading response...</b>");
$.ajax({
type: 'POST',
url: 'proccess.php',
data: $(that).serialize()
})
.done(function (data) {
$('#response').html(data);
})
.fail(function () {
alert("Posting failed.");
});
return false;
});
});
here I have referred the form object this
by assigning it to that
在这里我也提到了表单对象
this
由它分配给that
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.