javascript - 在未发布的表单中添加了密码字段

Question

所以我有一个表单，在其中选择下拉菜单中的选项后，我想向表单添加密码字段。我在通过 js 函数选择值为“private”的选项后添加它。 这是表单的 html 代码。

<form id="eventForm" class="pure-form pure-form-aligned" action="insertDB.php" method="POST">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Názov</label>
            <input id="name" type="text" placeholder="Názov" name="name" required>
        </div>

        <div class="pure-control-group">
            <label for="type">Typ udalosti</label>
            <select id="type" class="pure-control-group" onchange="addPassRow(this.selectedIndex);" name="eventType">
                <option value="sports">Šport</option>
                <option value="culture">Kultúra</option>
                <option value="nature">Príroda</option>
                <option value="education">Vzdelávanie</option>
                <option value="private">Súkromné</option>
            </select>
        </div>

        <div class="pure-control-group">
            <label for="lati">Zemepisná šírka</label>
            <input id="lati" type="text" placeholder="Zemepisná šírka" name="lati" required>
        </div>

        <div class="pure-control-group">
            <label for="long">Zemepisná dĺžka</label>
            <input id="long" type="text" placeholder="Zemepisná dĺžka" name="long" required>
        </div>

        <div class="pure-control-group" id="linkDiv">
            <label for="link">Link</label>
            <input id="link" type="text" placeholder="Link" size="40" name="link" required>
        </div>

        <div class="pure-controls">
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

这是 JS 函数:

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function addPassRow(index) {
    if (index == 4) {
        var div = document.createElement('div');

        div.className = 'pure-control-group';

        div.innerHTML = ' <div class="pure-control-group" id="passwordDiv">' +
                        '<label id="passwordLabel" for="password">Heslo</label>' +
                        '<input id="password" type="password" placeholder="Zadaj heslo">' +
                        '</div>';

        insertAfter(document.getElementById("linkDiv"), div);
    };

这就是我将密码字段添加到表单中的方法。选择私有(private)下拉列表后，会出现密码字段。但是在我填写并提交后，我可以通过 $_POST 获取除密码值之外的所有值，但 chrome 会询问我是否要保存密码。如果有人知道为什么密码值没有发布？谢谢!

Answer 1

您缺少新字段的名称属性:

替换:

div.innerHTML = ' <div class="pure-control-group" id="passwordDiv">' +
  '<label id="passwordLabel" for="password">Heslo</label>' +
  '<input id="password" type="password" placeholder="Zadaj heslo">' +
  '</div>';

与:

div.innerHTML = ' <div class="pure-control-group" id="passwordDiv">' +
  '<label id="passwordLabel" for="password">Heslo</label>' +
  '<input id="password" name="password" type="password" placeholder="Zadaj heslo">' +
  '</div>';