Javascript 未序列化Jquery表单输入

因此，我所做的是在AJAX调用之后，我需要动态创建一个表行，其中包含两个隐藏输入、一个常规输入和两个按钮，这些按钮在页面加载时具有与页面上已有的按钮相同的功能。我的问题是，我试图序列化的表单是空的，我不知道为什么

以下是我生成html的方式：

function addNewPlayerRow(player, tid) {
    var html = "<tr> <form role='form' name='editplayerform'>";
    html += "<td>";
    html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
    html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
    html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
    html += "</td></form>";
    html += "<td>";
    html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
    html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
    html += "</tr>";
    $(html).hide().appendTo("#playersbody").fadeIn(300);
}

当我单击该按钮时，控制台记录并清空序列化表单。有人知道为什么吗？

一个简单的测试，如：

console.log($(button).parent().prev().prev().tagName);

---

应该显示你的目标元素，在我看来，它是元素而不是形式。此外，正如其他人所建议的，您应该重新访问html结构。请注意，您在关闭之前忘记了关闭

按钮引用了它所属的

表单

：

<button type="submit" onclick="deletePlayerSender(this)">Remove</button> //add the type submit, which mimics the behaviour of input

var form = $(button).get(0).form; //access the DOM element using get(0)
//alternatively
var $form = $(button).parents('form'); //parents() in plural. Return the form element as jQuery element
console.log(form, $form);
console.log($(form).serialize());
console.log($form.serialize());

Remove//add类型submit，它模仿输入的行为
var form=$（按钮）.get（0.form）//使用get（0）访问DOM元素
//或者
var$form=$（按钮）.parents（'form'）//父母的复数形式。将表单元素作为jQuery元素返回
console.log（form$form）；
log（$（form.serialize（））；
log（$form.serialize（））；

你不能把html放在你想要的地方

表单元素不能放置在表块之间，这意味着它只能 包装一张桌子，或放在td内

还可以尝试替换

.parent().prev().prev()

与

这将支持结构变化

工作代码如下：

function addNewPlayerRow(player, tid) {
var html = "<tr>";
html += "<td><form role='form' name='editplayerform'>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}


function deletePlayerSender(button) {
var form = $(button).parent().parent().find('form');
console.log($(form));
console.log($(form).serialize());
}

函数addNewPlayerRow（播放器，tid）{
var html=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“保存名称”；
html+=“删除”；
html+=“”；
$（html）.hide（）.appendTo（“#playersbody”）.fadeIn（300）；
}
函数deletePlayerSender（按钮）{
var form=$（按钮）.parent（）.parent（）.find（'form'）；
console.log（$（表单））；
log（$（form.serialize（））；
}

检查。我对你的代码做了一些修改，现在正在工作

添加和删除这两种方法都有一些更改

函数addNewPlayerRow（播放器，tid）
{
var html=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“”；
html+=“保存名称”；
html+=“删除”；
html+=“”；
$（html）.hide（）.appendTo（“#playersbody”）.fadeIn（300）；
}
函数deletePlayerSender（playerId）
{
变量形式=$（“#EditPlayPerform”+playerId）；
log（$（form.serialize（））；
}

谢谢大家的帮助！我将表单放入

中，然后从按钮开始查找表单，从而修复了此问题：

var form = $(button).parent().prev().children("form");

---

我不相信你能在一个标签和一个标签之间粘贴一个表单标签。这是无效的html语法。^打开控制台，查看浏览器构造的标记，它不是您认为的那样，并且您没有得到表单，这就是它没有序列化的原因啊，好的。那就行了。将表单放在顶部，然后是and是否更有意义？您可以将表单放在标记中。

function addNewPlayerRow(player, tid) {
var html = "<tr>";
html += "<td><form role='form' name='editplayerform'>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}


function deletePlayerSender(button) {
var form = $(button).parent().parent().find('form');
console.log($(form));
console.log($(form).serialize());
}

function addNewPlayerRow(player, tid) 
{
    var html = "<tr><td><form role='form' name='editplayerform" + player._id + "' id='editplayerform" + player._id + "' >";
    html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
    html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
    html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
    html += "</form></td>";
    html += "<td>";
    html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(" + player._id + ");'>Save Name</button>";
    html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(" + player._id + ");'>Remove</button>";
    html += "</td></tr>";

    $(html).hide().appendTo("#playersbody").fadeIn(300);
}

function deletePlayerSender(playerId) 
{
    var form = $("#editplayerform" + playerId);
    console.log($(form).serialize());
}

var form = $(button).parent().prev().children("form");