jQuery / JavaScript 序列化空字符串（不是无名错误或禁用错误）答案

【问题标题】：jQuery / JavaScript serialization empty string (not the no name error or disable error)jQuery / JavaScript 序列化空字符串（不是无名错误或禁用错误）
【发布时间】：2012-01-19 23:17:46
【问题描述】：

我已经阅读了很多关于 jQuery serialize() 的帖子，但我无法让它与我的表单一起使用！

当我使用 html+php 打印表单时我可以工作，但当我使用 javascript 打印表单时我不会。我错过了什么？

我知道有很多关于此的帖子，但我发现的每个帖子都是关于 ppl 忘记 name="" 或禁用（在这里试试我的代码：http://jsfiddle.net/ZBxkz/1/）

<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>MerBeer</title>

    <!-- //jquery -->
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <!-- //Ajaxscript: -->

    <script type="text/javascript">
        $(document).ready(function () {

         $("#knappen")    
        .delegate('button[name="minKnapp"]', "click", beer_insert);

        $("#theForm")    
        .delegate('button[name="beer_form_submit"]', "click", serial);

        function serial(){

            var f = $('#beer_form'); // CHANGE THIS VALUE TO CHANGE FORM!! #beer_form and #testForm
            var beerContainer = f.serialize();
            alert (beerContainer);

        }

        function beer_insert() {

                //hide first button
                $('#dold').hide();

               //Dynamically added form
                $('#theForm').html('Test :<br><form name="beer_form" id="beer_form"><table id="beers">');
                for (var i = 0; i < 1; i++){
                    $('#theForm').append('<tr><td><input type="text" name="beerCountry" id="beerNo_'+i+'_country" /></td></tr>');
                }
                $('#theForm').append('</table></form><br>');

                $('#theForm').append('<button name="beer_form_submit">Second button</button><br>')
        }
    });

    </script> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <!-- Form that works-->
    <form id="testForm" name="testForm">
        <table>
            <?php
                for($i = 0; $i < 3; $i++){
                    echo('<tr><td><input type="text" name="test" id="inget'.$i.'"/></td></tr>');
                }
            ?>
            <tr><td><input type="text" name="test" id="ingetA"/></td></tr>
            <tr><td><input type="text" name="test" id="ingetB"/></td></tr>
        </table>
    </form>        

    <div id="theForm"></div>
    <div id="knappen"><button id="dold" name="minKnapp">The Button</button></div>

</body>

【问题讨论】：

标签： javascript jquery forms serialization

【解决方案1】：

我希望你的问题没有错，但可能你想要这个？：http://jsfiddle.net/jyM5Z/

不要将您的 html 与许多附加内容放在一起。相反，首先构建一个完整的 html 字符串，然后将其添加到您的容器中。这不仅会使其更快，而且还会保护您免受意外行为的影响，因为浏览器会解析您的 HTML 片段并对其进行更改以使其有意义（例如自动关闭打开的标签）。

【讨论】：

你说对了！非常感谢！

【解决方案2】：

您不是将 附加到 表单中，而是将其附加在之后。因此，当您调用序列化时，实际上没有没有可以序列化。

// this creates the form
$('#theForm').html('Test :<br><form name="beer_form" id="beer_form"><table id="beers">');

// but these don't append INTO it
for (var i = 0; i < 1; i++){
    $('#theForm')
        .append('<tr><td><input type="text" name="beerCountry" id="beerNo_'+i+'_country" /></td></tr>');
}

$('#theForm').append('<button name="beer_form_submit">Second button</button><br>')

这几乎就是您想要的工作流程：

// create my form
var my_dynamic_form = $('<form></form>');

// append to it
for (;;) {
    my_dynamic_form.append('<input/>');
}

// append your form to the DOM
$('#my_form').append(my_dynamic_form);

【讨论】：

感谢您清除此问题！不知道我怎么会错过它，不知道我检查了多少次 html 输出 :-D 讨厌“自己的代码盲”或如何称呼它:-D