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"标记中获取值。请帮助Thx。
因为您正在使用
getAttribute
读取值
"getAttribute()
返回元素上指定属性的值"
使用Element.value
读取InputElement
的value
属性
每当Element
的value
发生变化时,Element
的property
正在更新,而不是attribute
function checkInput() {
var v1 = document.getElementsByName("uname");
var v2 = document.getElementsByName("pword");
var uname = v1[0].value;
var pword = v2[0].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;
}
<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:</th>
<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>
注意:请参阅.prp()与.attr()问题以获得更多理解!
jQuery到结果!
有些人喜欢它,有些人讨厌它。我不会把它作为你唯一的前端库,但如果你需要做简单的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/
只需更改为:
var uname = v1[0].value;
var pword = v2[0].value;
.value
返回输入元素的值
您也可以很容易地使用jquery获取值:
var uname = $("input[name=uname]").val();
var pword = $("input[name=pword]").val();