Html 如何使用 Ajax 通过 Bootstrap Modal 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15874889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to submit Form by Bootstrap Modal using Ajax
提问by Hunain Usman
I'll try to be concise as possible, i am new to bootstrap and advanced javascript, basically i have used bootstrap modal to load a form in front of user to collect and save data in database. my question is how will you do that using ajax, because i have other modals also which will have different forms and i dont want to process the entire page again and again. P.S i am making this application in codeigniter
我会尽量简洁，我是引导程序和高级 javascript 的新手，基本上我已经使用引导程序模式在用户面前加载表单以收集和保存数据库中的数据。我的问题是你将如何使用 ajax 做到这一点，因为我还有其他模态，它们也会有不同的形式，我不想一次又一次地处理整个页面。PS我正在codeigniter中制作这个应用程序
This is the form inside modal
这是模态里面的表格
<section id="launch" class="modal hide fade" style="width: 800px; left: 500px;">
<header class="modal-header" style="height: 7px; background: none repeat scroll 0% 0% rgb(87, 164, 210);">
<h4 style="margin-bottom: 0px; margin-top: -5px; text-align: center; color: white;">Unit Details</h4>
<button type="button" class="close" data-dismiss="modal" style="margin-top: -20px;">×</button>
</header>
<?php echo form_open('setupnewblock/registerNewBlock'); ?>
<div class="modal-body" style="padding-top: 0px; padding-left: 0px; " >
<div style="position: relative; left: 43px; margin-top: 41px; margin-left: 0px;">
<span>Address 1</span>
<input type="text" placeHolder="" name="address1" style="width: 219px; height: 17px; margin-left: 20px; margin-top: 3px;" value="<?php echo set_value('address1'); ?>"/>
<br />
<span>Address 2</span>
<input type="text" placeHolder="" name="address2" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address2'); ?>"/>
<br />
<span>Address 3</span>
<input type="text" placeHolder="" name="address3" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address3'); ?>"/>
<br />
<br />
</div>
<footer class="modal-footer" style="margin-top: 475px;">
<input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px; height: 27px; width: 89px;" data-dismiss="modal"></input>
<?php echo form_close(); ?>
</footer>
</section>
i want to submit this form using ajax
我想使用ajax提交这个表单
回答by Fery Wardiyanto
i've got same problem, but when I tried this gistall done nicely.
我有同样的问题，但是当我尝试这个要点时，一切都做得很好。
you can try this code:
你可以试试这个代码：
$(document).ready( function() {
$('.modal form').on('submit', function(event) {
event.preventDefault()
$.post( $(this).attr('action'), $(this).serialize(), function(data) {
// just try to see the outputs
console.log(data)
if(data.return===true) {
// Success code here
} else {
// Error code here
}
}, 'json')
})
});
回答by Dmonix
If you want to do it very simple this should work for you:
如果你想做得非常简单，这应该适合你：
$('input[name=save]').click(function(e) {
e.preventDefault();
$.post("setupnewblock/registerNewBlock", {form: $("#launch form").serialize()},
function(data) {
// callback
});
});
回答by Ashok Kumar
Have a look at codeigniter user guide:
看看 codeigniter用户指南：
so your code should be ,
所以你的代码应该是，
$attributes = array('class' => 'myform', 'id' => 'myform');
echo form_open('setupnewblock/registerNewBlock', $attributes);
And After that you have to bind the submit function of your form to jquery function like
之后，您必须将表单的提交功能绑定到 jquery 功能，例如
$(document).ready(function() {
$("#myform").submit(function() {
$.ajax(
{
type: 'POST',
url: 'your url to php file',
data: {}, //your form datas to post
success: function(response)
{
alert(response);
},
error: function()
{
alert("Failure");
}
});
});
});
