HTML 表单值不会推送到 JavaScript 数组答案

【问题标题】：HTML Form Values don't push to JavaScript arrayHTML 表单值不会推送到 JavaScript 数组
【发布时间】：2017-03-01 23:18:57
【问题描述】：

好的，所以我正在尝试将 HTML 表单输入的值推送到 JavaScript 数组。当我加载页面并通过表单提交值时，它会在数组中返回空字符串。我不明白为什么会这样。感谢您的帮助。

相关 HTML：

<form>
                <div class="form-group">
                    <label for="name1">Name: </label>
                    <input type="text" class="form-control b" id="nameone">
                    <label for="pref1">Preferences: </label>
                    <input type="text" class="form-control a" id="prefone"> </div>
                <div class="form-group">
                    <label for="name2">Name: </label>
                    <input type="text" class="form-control c" id="nametwo">
                    <label for="pref2">Preferences: </label>
                    <input type="text" class="form-control a" id="preftwo"> </div>
                <div class="form-group">
                    <label for="name3">Name: </label>
                    <input type="text" class="form-control d" id="namethree">
                    <label for="pref3">Preferences: </label>
                    <input type="text" class="form-control a" id="prefthree"> </div>
                <div class="form-group">
                    <label for="name4">Name: </label>
                    <input type="text" class="form-control e" id="namefour">
                    <label for="pref4">Preferences: </label>
                    <input type="text" class="form-control a" id="preffour"> </div>
                    <!-- ... -->
                    <button type="submit" class="btn btn-primary" id="sbm">Submit</button>
</form>

相关 JavaScript：

var table1 = [];
    var table2 = [];
    var table3 = [];
    var table4 = [];
    var names = [];
    var pref = [];

// ...

function namesdefine() {
        names.push(document.getElementById('nameone').value);
        names.push(document.getElementById('nametwo').value);
        names.push(document.getElementById('namethree').value);
        names.push(document.getElementById('namefour').value);
        names.push(document.getElementById('namefive').value);
        names.push(document.getElementById('namesix').value);
        names.push(document.getElementById('nameseven').value);
        names.push(document.getElementById('nameeight').value);
        names.push(document.getElementById('namenine').value);
        names.push(document.getElementById('nameten').value);
        names.push(document.getElementById('nameeleven').value);
        names.push(document.getElementById('nametwelve').value);
        names.push(document.getElementById('namethirteen').value);
        names.push(document.getElementById('namefourteen').value);
        names.push(document.getElementById('namefifthteen').value);
        names.push(document.getElementById('namesixteen').value);
        names.push(document.getElementById('nameseventeen').value);
        names.push(document.getElementById('nameeighteen').value);
        names.push(document.getElementById('namenineteen').value);
        names.push(document.getElementById('nametwenty').value);
        names.push(document.getElementById('nametwentyone').value);
        names.push(document.getElementById('nametwentytwo').value);
        names.push(document.getElementById('nametwentythree').value);
        names.push(document.getElementById('nametwentyfour').value);
        console.log(names);
        var testvar = document.getElementById('nameone').value;
        console.log(testvar);
        console.log("Look here please");
    }
 document.getElementById('sbm').onclick = namesdefine();seat(document.getElementsByClassName('a').value);check();changeHTML();
    console.log(table1);
    console.log(table2);
    console.log(table3);
    console.log(table4);
    console.log("second call");

【问题讨论】：

标签： javascript html arrays sorting

【解决方案1】：

当您分配给.onclick 时，您正在调用namesdefine() 函数。您应该将该函数分配给.onclick，因此请忽略它后面的()。

document.getElementById('sbm').onclick = namesdefine;

【讨论】：

【解决方案2】：

任意使用：

document.getElementById('sbm').onclick = namesdefine;

或者

document.getElementById('sbm').addEventListener('click', namesdefine);

如果您需要全部调用它们，请使用：

document.getElementById('sbm').onclick = function () {
    namesdefine();
    seat(document.getElementsByClassName('a').value);
    check();
    changeHTML();
}

在getElementById() 之后检查null 总是一个好习惯

【讨论】：

谢谢。它可以工作，但是一旦我按下提交按钮后页面重新加载，更改就会消失。我怎样才能避免这种情况发生？
没关系。我明白了。

【解决方案3】：

尝试循环获取数据。您可以使用 getElementByTagName 或 getElementByClassName。

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    //Create array here arr.push(elements[i].value);
}

您可以在 click 函数中调用它。希望对您有所帮助。

【讨论】：