[英]How do I get the the closest form data using jQuery when a child input has changed?
I have multiple forms in a page that contains a number of input checkboxes, when one of the form inputs change I want to collect all the parent forms data into a JSON array so I can post this somewhere.我在包含多个输入复选框的页面中有多个 forms,当其中一个表单输入发生更改时,我想将所有父 forms 数据收集到 JSON 数组中,以便我可以在某处发布。
I am struggling to get the post data into an array, I was planning to use this.closest("form").serializeObject()
but this doesn't appear to work.我正在努力将发布数据放入数组中,我打算使用
this.closest("form").serializeObject()
但这似乎不起作用。
I get the following error:我收到以下错误:
Uncaught TypeError: this.closest(...).serializeObject is not a function
未捕获的类型错误:this.closest(...).serializeObject 不是 function
$(document).ready(function() { console.log("jquery ready;"): $('form input.checkbox');change(function() { var jsonArray. var formData = this.closest("form");serializeObject(). console;log(formData); }); });
<form action="http://myurl.com/1" id="form-1"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/2" id="form-2"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/3" id="form-3"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form>
That's because you're using normal vanilla javascript this
.那是因为您使用的是普通的香草 javascript
this
。 Since you're using JQuery, you should use $(this)
由于您使用的是 JQuery,因此您应该使用
$(this)
By using
$(this)
, you enabled jQuery functionality for the object.通过使用
$(this)
,您为 object 启用了 jQuery 功能。 By just usingthis
, it only has generic Javascript functionality.仅仅使用
this
,它就只有通用的 Javascript 功能。 ie you need $(this) for jQuery functions, but when you want to access basic javascript methods of the element that don't use jQuery, you can just use this.即 jQuery 函数需要 $(this),但是当您想要访问不使用 jQuery 的元素的基本 javascript 方法时,您可以使用它。
So inside your function, your formData
variable to所以在你的 function 里面,你的
formData
变量
var formData = $(this).closest("form").serializeObject();
To keep things simple and clear, I will be using your example in the example below or click on the codepen link below.为了使事情简单明了,我将在下面的示例中使用您的示例,或者单击下面的 codepen 链接。
To get the data in an array you can use .serializeArray();
要获取数组中的数据,您可以使用
.serializeArray();
or use .serializeObject();
或使用
.serializeObject();
to get the data a key-value pair object depending on your choice and intention;根据您的选择和意图,获取数据键值对 object;
$(document).ready(function() { console.log("jquery ready;"): $("form input.checkbox");change(function() { var jsonArray. var formData = $(this).closest("form");serializeObject(). console;log(formData); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="http://myurl.com/1" id="form-1"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/2" id="form-2"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/3" id="form-3"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form>
You can try this,你可以试试这个
$(document).ready(function() { var formObj = {}; $('form input:checkbox').change(function() { let form = $(this).closest("form"); formObj[form.attr('id')] = {}; form.serializeArray().forEach(function(elem){ formObj[form.attr('id')][elem.name] = elem.value; }); console.log(formObj); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="http://myurl.com/1" id="form-1"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/2" id="form-2"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form> <form action="http://myurl.com/3" id="form-3"> <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label> <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.