Question

所以我正在做的是在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);
}

这里是deleteplayerbutton类按钮的onclick函数。

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

单击按钮时，控制台会记录并清空序列化表单。谁知道为什么？

Answer 1

检查https://jsfiddle.net/dk7qbfpd/。我对你的代码进行了一些修改，现在正在运行。

两种方法都有一些变化，添加和删除

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());
}

Answer 2

一个简单的测试，如：

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

应该显示您要定位的元素，最初看起来似乎是＆lt; tr＆gt;元素而不是形式。此外，正如其他建议你应该重新审视你的HTML结构。请注意，您忘记了结束＆lt; / td＆gt;在结束之前＆lt; / tr＆gt;

Answer 3

button引用了它所属的form：

<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());

Answer 4

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

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

也可以尝试替换

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

带

 $(button).parent().parent().find('form')

将支持结构变更

以下工作代码：

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());
}

Answer 5

感谢大家的帮助！我设法通过将表单放在<td>中然后通过执行此操作找到从按钮开始的表单来修复它：

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

Jquery表单输入未被序列化

5 个答案: