jquery .serialize 不适用于动态生成的表单
[英]jquery .serialize doesn't work on dynamically generated form
问题描述
I'm working with Java/Spring inside a .jsp.
我在 .jsp 中使用 Java/Spring。
I'm dynamically loading a form (form tags inlcuded) from myForm.jsp inside a div within myPage.jsp and trying to make an ajax post call with said data.我正在从 myForm.jsp 中的 myPage.jsp 内的 div 动态加载一个表单（包含表单标签），并尝试使用所述数据进行 ajax post 调用。 When I call jQuery .serialize and print out the data, it comes back empty.当我调用 jQuery .serialize 并打印出数据时，它返回空。
However, If include the form tags inside myPage.jsp and just load the inputs, everything works fine.但是，如果在 myPage.jsp 中包含表单标记并只加载输入，则一切正常。
Is there something about dynamically loading a whole form that I'm doing wrong?有没有关于动态加载我做错的整个表单的事情？
myPage.jsp我的页面.jsp
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> if(window.attachEvent) { window.attachEvent('onload', LoadTable); } else { if(window.onload) { var curronload = window.onload; var newonload = function() { curronload(); LoadTable(); }; window.onload = newonload; } else { window.onload = LoadTable; } } $(document).on('click','#myFormSubmit',function() { var data = $('#myForm').serialize(); console.log("data " + data); //data is empty! return false; }); function LoadTable() { $.get('/url', function(data) { $('#myForm').append(data); console.log('Data was fetched.'); }); } </script>
<%@ page import="java.util.List" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <body> <div id='myDiv'> <!-- myForm.jsp gets loaded here --> </div> </body> </html>
myForm.jsp myForm.jsp
<form id='myForm' name='config_cache' action='config_cache' method='POST'>
<input id='input1' type="checkbox" name="input1" value="true">
<input id='myFormSubmit' name="submit" type="submit" value="Submit">
</form>
3 个解决方案
解决方案1
0 2015-04-13 16:56:40
Your form is submitting - you just haven't submitted any data to it.您的表单正在提交 - 您只是尚未向其提交任何数据。 Your form's only input is a checkbox which isn't checked.您表单的唯一输入是未选中的复选框。 Per the documentation for .serialize()根据.serialize()的文档
Note: Only "successful controls" are serialized to the string.
Substitute your form with this one and submit it.用这个替换你的表单并提交它。 You should see:你应该看到：
data someName=This+is+a+test&input1=true数据 someName=This+is+a+test&input1=true
<form id='myForm' name='config_cache' action='config_cache' method='POST'>
<input type="hidden" name="someName" value="This is a test">
<input id='input1' type="checkbox" name="input1" value="true" checked>
<input id='myFormSubmit' name="submit" type="submit" value="Submit">
</form>
解决方案2
0 2016-03-16 01:49:55
It sounds like you need your checkbox serialized in a form where it would be submitted with a null value if it wasn't selected.听起来您需要在表单中序列化您的复选框，如果未选择它，它将以空值提交。 This is a common requirement for javascript form serialization.这是 javascript 表单序列化的常见要求。 Take a look at this jquery plugin that handles that requirement:看看这个处理该要求的 jquery 插件：
https://github.com/davemaple/jquery-form2json https://github.com/davemaple/jquery-form2json
This would allow your form to serialize as: { "input1": null }这将允许您的表单序列化为： { "input1": null }
解决方案3
0 2020-09-02 13:38:56
For dynamic data use .appendTo() [https://api.jquery.com/appendTo/] instead of .append()!对于动态数据，使用 .appendTo() [https://api.jquery.com/appendTo/] 而不是 .append()！
I know how it sounds, but it works!我知道这听起来如何，但它有效！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.