在第二次调用时序列化()值错误

Question

我有一个正在调用的页面，它在ajax调用中具有表单提交。当函数第二次被调用时，它在ajax调用数据中有原始数据。

我只在这里用序列化部分简化了这一点：

test_form.php

    function form($a, $b) {
    ?>
    <form name="myform" id="myform">
        <input type="text" id="a" name="a" value="<?php echo $a; ?>" />
        <input type="text" id="b" name="b" value="<?php echo $b; ?>" />
    </form>
    <script>
        console.log($("#myform").serialize());
    </script>
    <?php
}

然后从一个单独的文件中调用这一点：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="/P3Live/_includes/css/gametypes.css">
    <link rel="stylesheet" type="text/css" href="/P3Live/_includes/css/tables.css">
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
    <script src="/P3Live/_includes/js/general_functions.js"></script> 
</head>
<?php
error_reporting(E_ERROR);
include_once("test_form.php");

form("firstA", "firstB");
echo "step # 1 should be started <br />";


form("secondA", "secondB");
echo "step # 2 should be started <br />";
?>

当第二个文件被触发时，结果是：

HTML :应启动firstA (输入框1) firstB (输入框2)步骤#1

应启动secondA (输入框1) secondB (输入框2)步骤2

控制台: a=firstA&b=firstB a-firstA&b=firstB b

您会注意到输入字段是正确的，但是底部的序列化数据不是。它显示来自对两个结果的第一个调用的相同序列化数据。我试着发了一张截图，但没有声誉点这样做。

任何帮助都将不胜感激。

Answer 1

您正在使用相同的ID创建两个表单，由于ID是唯一的，所以您从第一个表单中获取数据，因为这是jQuery在存在重复ID时所选择的，第一个元素具有该ID。

尝试创建具有唯一ID的表单

function form($a, $b, $id) {
    ?>
    <form name="myform" id="<?php echo $id; ?>">
        <input type="text" id="a" name="a" value="<?php echo $a; ?>" />
        <input type="text" id="b" name="b" value="<?php echo $b; ?>" />
    </form>
    <script>
        console.log($("#<?php echo $id; ?>").serialize());
    </script>
    <?php
}

然后再做

form("firstA", "firstB", "myForm1");
form("secondA", "secondB", "myForm2");

等。

Answer 2

这是因为这两种表单的ID是相同的。您必须为第二个表单分配一个新的ID。应该是这样的：

<?php
function form($a, $b) {
    static $i = 0;
    ?>
    <form name="myform<?php echo $i; ?>" id="myform<?php echo $i; ?>">
        <input type="text" id="a" name="a" value="<?php echo $a; ?>" />
        <input type="text" id="b" name="b" value="<?php echo $b; ?>" />
    </form>
    <script>
        console.log($("#myform<?php echo $i; ?>").serialize());
    </script>
    <?php
    $i++;
}