twitter-bootstrap 使用twitter bootstrap时如何使用jquery获取表单对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14977963/
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 get the form object using jquery when using twitter bootstrap
提问by Saurabh Kumar
I have a model object from twitter bootstrap which is as follows
我有一个来自 twitter bootstrap 的模型对象，如下所示
<!-- Name Edit div -->
<div id="form-content" class="modal hide fade in" tabindex="-1">
<form name="form" action="<c:url value="/editname" />" method="post">
<div class="modal-header">
<h4>Edit Name</h4>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls">
<ul class="nav nav-list">
<li class="nav-header">First Name</li>
<li><input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline"></li>
<li class="nav-header">Last Name</li>
<li><input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline"></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button id="submit" class="btn btn-success">Update</button>
<button class="btn" data-dismiss="modal" >Close</button>
</div>
</form>
</div>
and my ajax script is like follows:
我的ajax脚本如下：
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
var $form = $(this).closest("form").attr('id');
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(msg){
$("#thanks").html(msg);
$("#form-content").modal('hide');
},
error: function(){
//alert("failure");
}
});
});
});
But the request is not firing. I checked in firebug and it looks like it's not able to get the form object and the request is not going to the controller. How can i make it work. I will have multiple forms in the same page in future.
但请求没有触发。我检查了萤火虫，看起来它无法获取表单对象并且请求不会发送到控制器。我怎样才能让它工作。将来我将在同一页面中有多个表单。
回答by oleron
I would suggest you use the .submit()function:
我建议您使用该.submit()功能：
$(function() {
$('#form_id').submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(msg){
$("#thanks").html(msg);
$("#form-content").modal('hide');
},
error: function(){
//alert("failure");
}
});
});
});
Set the form id to something and change the javascript to match
将表单 id 设置为某些内容并更改 javascript 以匹配
You can also add a data-ajax="true"to all the forms you want to submit bia ajax and then use:
您还可以在data-ajax="true"要提交 bia ajax 的所有表单中添加一个，然后使用：
var forms = $('form[data-ajax="true"]');
forms.submit(function(e){
e.preventDefault();
// do ajax
});
回答by Ashwin Preetham Lobo
<form name="form" action="<c:url value="/editname" />" method="post">
One thing is that you did not given a id for form.
一件事是您没有为表单提供 id。
var $form = $(this).closest("form").attr('id');
var $form = $(this).closest("form").attr('id');
And if the id exist(if u adding it through code), then above $formwill contain the id of the form. That is a string.
如果 id 存在（如果你通过代码添加它），那么上面$form将包含表单的 id。那是一个字符串。
So use like this,
所以像这样使用，
var $form = $(this).closest("form");
instead
反而
var $form = $(this).closest("form").attr('id');
回答by Stevo
Your form doesn't have an id attribute. Give it one and it might work. so
您的表单没有 id 属性。给它一个，它可能会起作用。所以
var $form = $(this).closest("form").attr('id');
will not return a value.
不会返回值。
回答by anddoutoi
All HTML form input controls (input, select, button, etc) has a reference to their owner. This makes it possible to do:
所有 HTML 表单输入控件（输入、选择、按钮等）都有对其所有者的引用。这使得可以执行以下操作：
var $form = $(this.form);
But I think oleron′s answer with using submitevent is the correct way to do it.
但我认为 oleron 使用submit事件的答案是正确的方法。
