Question

HTML

<form action="./Login.php" method="post" onsubmit="return checkInput();">
<table width="300" border="1">
<tbody>
<tr>
<th> UserName: </th>
<td><input class="box" type="text" value="" name="uname" id="uname"></td>
</tr>
<tr>
<th>Password: </td>
<td><input class="box" type="password" value="" name="pword" id="uname"></td>
</tr>
</tbody>
</table>
<input type="hidden" id="infoDis" value=""/>
<input type="submit" value="Log-in" name="login">
<input type="submit" value="Reset" name="reset">
</form>

JS

function checkInput()
{

    var v1 = document.getElementsByName("uname");
    var v2 = document.getElementsByName("pword");

    var uname = v1[0].getAttribute("value");
    var pword = v2[0].getAttribute("value");

    if (uname == "" || pword == "") 
    {
        if(uname == "" && pword != "")
        {
            alert("Error: Username is Empty. Please Enter Username.");
        }
        else if(pword == "" && uname != "")
        {
            alert("Error: Password is Empty. Please Enter Password");
        }
        else
        {
            alert("Error: Username And Password is Empty. Please Enter Username and Password");
        }

        location.reload();
         return false;
    }

    return true;
}

你好。我是html / js的新手。我有一个小问题，当我在文本框中输入新值时。它没有被javascript捕获。反过来，经过一些调试后我发现javascript总是在html标签中取值。因此，即使在第一次尝试或重试阶段输入值，javascript也会获取html＆＃34;＆＃34;中的值。标签。请帮助Thx。

Answer 1

因为您正在使用getAttribute
阅读值

“getAttribute()返回元素”

上指定属性的值

使用Element.value阅读value

的InputElement属性

每当value的{{1}}发生更改时，Element的{{1}}正在更新，而不是property

Element

attribute

注意：请参阅.prop() vs .attr()问题以获得更多理解！

Answer 2

只需更改为：

var uname = v1[0].value;
var pword = v2[0].value;

.value返回输入元素的值

Answer 3

您还可以非常轻松地使用jquery获取价值：

var uname = $("input[name=uname]").val();
var pword = $("input[name=pword]").val();

Answer 4

jQuery to the resuce ！

有些人喜欢它，有些人则讨厌它。我不会依赖它作为你唯一的前端库，但如果你需要做简单的DOM操作/交互，那么jQuery通常是一个很好的解决方案。在jQuery中抓取从表单元素存储的数据很简单。

$(document).ready(function() {
  $('.button').on('click', function() {
    var text = $('#some_element).val();
    $('#another_element').append(text);
  });
});

API文档有简单的示例。 http://api.jquery.com/val/

表单不接受新值

4 个答案: