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()方法返回类似于数组的节点 list ，因此您需要指定索引才能检索特定输入的值（因为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('');
})

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

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

5 个答案: