[英]typeError: form.serialize is not a function - What am I missing
I'm not sure what I'm missing, but this code is throwing the a typeError: form.serialize is not a function 我不确定我缺少什么,但是这段代码抛出一个typeError:form.serialize不是一个函数
$('#paragraphsList').on('change', 'input', function (e) {
e.preventDefault();
var form = this.closest("form");
console.log(form);
console.log(form.serialize());
The form is dynamically created, but the console.log output for the form variable shows that it is finding the correct form. 表单是动态创建的,但是form变量的console.log输出显示它正在查找正确的表单。
<ul id="paragraphsList">
<--dynamicaly generated content begins here-->
<li>
<form class="paragraphForm" name="80" id="80">
<input id="81" name="activity" value="a" class="paragraphs">
<input id="82" name="task" value="b" class="paragraphs">
<input id="83" name="pStyle" value="c" class="paragraphs">
<input id="84" name="pContent" value="d" class="paragraphs,style2">
</form>
</li>
<li>
<form class="paragraphForm" name="85" id="85">
<input id="86" name="activity" value="a" class="paragraphs">
<input id="87" name="task" value="b" class="paragraphs">
<input id="88" name="pStyle" value="c" class="paragraphs">
<input id="89" name="pContent" value="d" class="paragraphs,style2">
</form>
</li>
.....
Sorry for the late updates.... here is a full page that demonstrates the problem. 抱歉,更新太晚了。...这是一个完整的页面,演示了该问题。 If you look at the console output, the on-change is obviously being called in the correct place, and has the correct form object, but the serialize call still fails. 如果您查看控制台输出,则on-change显然是在正确的位置被调用的,并且具有正确的form对象,但是序列化调用仍然失败。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p onclick="load()">Load Forms</p>
<ul id="paragraphsList">
</ul>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function load() {
$('#paragraphsList').empty();
$('#paragraphsList').append(newForm("A", "step1", "task1", "myStyle1", "myContent1"));
$('#paragraphsList').append(newForm("b", "step2", "task2", "myStyle2", "myContent2"));
$('#paragraphsList').append(newForm("c", "step3", "task3", "myStyle3", "myContent3"));
$('#paragraphsList').append(newForm("d", "step4", "task4", "myStyle4", "myContent4"));
}
function newForm(id, activity, task, pStyle, pContent) {
var li = $('<li></li>');
var form = $("<form></form>");
form.attr("class", "paragraphForm");
form.attr("name", id);
form.attr("id", id);
form.append(newField(id, "activity", activity, "paragraphs", "data" ));
form.append(newField(id, "task", task, "paragraphs", "data" ));
form.append(newField(id, "pStyle", pStyle, "paragraphs", "data" ));
form.append(newField(id, "pContent", pContent, "paragraphs," + pStyle, "data"));
form.change(function () {
console.log(this);
console.log(this.serialize());
});
li.append(form);
return li;
}
function newField(id, name, value, style) {
var input = $("<input>");
input.attr("id", id + "." + name);
input.attr("name", name);
input.attr("value", value);
input.attr("class", style);
return input;
}
</script>
</html>
You are using a selector for the id paragraphsList
, which is missing on your form. 您正在使用的ID选择paragraphsList
,这是你的表格上失踪。 -- ah, it would be nice if you'd shown that it's the parent in the snippet. -啊,如果您证明它是摘要中的父项,那就太好了。
I think you need to select the input field, and then call the 'on-click' on that. 我认为您需要选择输入字段,然后在其上调用“单击”。 That way 'this' refers to the input field instead of the container of the form. 这样,“ this”将引用输入字段,而不是表单的容器。
$('#paragraphsList > form > input')
This could be solved as is said in documentation from jquery serialize: 可以解决此问题,如jquery serialize文档中所述:
$( ".paragraphForm" ).on( "change", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
https://api.jquery.com/serialize/ https://api.jquery.com/serialize/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serialize demo</title>
<style>
body, select {
font-size: 12px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
font-size: 14px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>
</body>
</html>
The variable "form" above is a "regular" object and not a DOM object. 上面的变量“ form”是“常规”对象,而不是DOM对象。 This code works 此代码有效
console.log($(form).serialize());
Evidently this.closest('form') returns a regular object when I expected it to be a DOM object. 当我希望它是一个DOM对象时,显然this.closest('form')返回一个常规对象。 I'm still a bit confused about the difference between this and $(this) and why the response from this.closest("form") is not a DOM object. 对于this和$(this)之间的区别以及为什么this.closest(“ form”)的响应不是DOM对象,我仍然感到困惑。 Any clarification on the topic is appreciated. 对此主题的任何澄清表示赞赏。
Listening to dynamic content on ready 准备好聆听动态内容
<ul id="paragraphsList">
</ul>
$(document).ready(function () {
var form = $('<li><form class="paragraphForm" id="form1" name="80" id="80"><input id="81" name="activity" value="a" class="paragraphs"><input id="82" name="task" value="b" class="paragraphs"><input id="83" name="pStyle" value="c" class="paragraphs"><input id="84" name="pContent" value="d" class="paragraphs,style2"></form></li>');
$('#paragraphsList').append(form);
$("input").click(function () {
alert('you clicked me');
console.log($('form').serialize());
});
});
Here is the content created dynamically and listening to a click event. 这是动态创建的内容并正在监听click事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.