使用serialize()针对特定表单
按照我之前的问题, 很快就得到了回答作者:Meder 这并不好笑,现在在提交可重用的 jQuery 表单的过程中出现了一个额外的问题这不会让用户离开他们原来的位置。
问题
jQuery serialize()
函数在页面内的所有表单上发挥其魔力,而不是在提交的特定表单上。下面的示例代码。
如何捕获表单的唯一名称/id,并用目标表单的名称替换 $("form").serialize()
中的 "form"
那是连载的?
表单代码
<form name="contact" id="contact" action="">
<input name="_recipients" type="hidden" value="[email protected]" />
<input name="_subject" type="hidden" value="Title" />
...
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label><br />
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label><br />
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label><br/>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
</fieldset>
</form>
jQuery 序列化和发布
var dataString = $("form").serialize();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/_global/assets/scripts/formmail/formmail.asp",
data: dataString,
...
Following on from my previous question, which was so quickly answered by Meder it wasn't funny, there's now an additional question that's popped up in the process of making a reusable jQuery form submitted that doesn't take the user away from where they were.
Problem
The jQuery serialize()
function is performing its magic on all forms within a page, and not the specific form which was submitted. Example code below.
How do I capture the form's unique name/id, and replace "form"
within $("form").serialize()
with the name of the target form so only that is serialised?
Form code
<form name="contact" id="contact" action="">
<input name="_recipients" type="hidden" value="[email protected]" />
<input name="_subject" type="hidden" value="Title" />
...
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label><br />
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label><br />
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label><br/>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
</fieldset>
</form>
jQuery serialise and post
var dataString = $("form").serialize();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/_global/assets/scripts/formmail/formmail.asp",
data: dataString,
...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
如果您要将事件处理程序附加到按钮或表单的
submit
事件,那么您可以在submit
事件处理程序内使用this
引用它函数范围,例如我强烈建议阅读 http://docs.jquery.com/Selectors
If you are attaching an event handler to a button or the form's
submit
event then you can refer to it withthis
if inside thesubmit
event handler function scope, egI highly recommend reading http://docs.jquery.com/Selectors
通过使用“form”字符串作为选择器,您实际上获取了页面内的所有
FORM
元素,为了仅选择一种表单,您可以:通过其 id 属性获取特定表单(使用 id 选择器):
或者通过其名称属性(使用 attributeEquals 选择器):
By using the "form" string as a selector, you are actually getting all the
FORM
elements within the page, in order to select only one form, you can:Get the specific form by its id attribute (using the id selector):
Or by its name attribute (using the attributeEquals selector):
除了使用
serialize
之外,还有一个不错的插件,它允许您发布您的异步形成。您所要做的就是:另外不要忘记为表单分配正确的操作,它不应该为空。
Instead of using
serialize
there's a nice plugin that allows you to post your forms asynchronously. All you have to do is:Also don't forget to assign the correct action to the form, it shouldn't be empty.