如何使用JavaScript从文本框中检索数据？

Question

JavaScript / HTML的新手，帮忙！

我有2个文本框和一个提交按钮。 我正在尝试使用JavaScript从每个数据中检索数据，目前，只需将它们放入警报框中即可。

但是，单击按钮后，警报只会显示“未定义”，求助！

这是一个代码片段：

 function submitApp() { var authValue = document.getElementsByName("appAuthor").value; var titleValue = document.getElementsByName("appTitle").value; alert(authValue); } 

 <input type="text" name="appAuthor" size="" maxlength="30" /> <input type="text" name="appTitle" maxlength="30" /> <input type="button" value="Submit my Application!" onclick="submitApp()" /> 

Answer 1

getElementsByName()返回一个列表。 因此，您可以获取列表中的第一项：

document.getElementsByName("appAuthor")[0].value

Answer 2

.getElementsByName()方法返回一个类似于数组的节点列表 ，因此您需要指定一个索引才能检索特定输入的值（因为value属性仅适用于DOM元素，不适用于整个列表）。

function submitApp() {
    var authValue = document.getElementsByName("appAuthor")[0].value;
    var titleValue = document.getElementsByName("appTitle")[0].value;
    alert(authValue);
}   

Answer 3

当使用getElementsByName或getElementsByClassName时，它将返回元素数组，因此您应该放置索引以访问每个元素。

authValue = document.getElementsByName("appAuthor")[0].value;

Answer 4

只需将此jQuery添加到document.ready部分，如下所示：

$(document).ready(function() {
    $('#submit').on('submit', function(e) {
        e.preventDefault();
        submitApp();
    });

    function submitApp() {
        var authValue = document.getElementsByName("appAuthor")[0].value;
        var titleValue = document.getElementsByName("appTitle")[0].value;

        alert(authValue);
   }
});

<input type="submit" id="submit" value="Submit my Application!">

如果要提交表单，请删除e.preventDefault（）;，但是如果您只想更新值，则将其保留在其中以防止表单提交。

Answer 5

您可以将按钮类型更改为提交类型，然后执行以下操作：

$('body').find('form').on('submit', function(e){
    e.preventDefault();
    var authValue = $('input[name="appAuthor"]').val();
    var titleValue = $('input[name="appTitle"]').val();
    //...here do whatever you like with that information
    //Below empty the input
    $('input').val('');
})

或者只是将表单解释为数组，以使您的生活更轻松并清理代码。