表单不接受新值

Form does not take in new values

本文关键字：新值 不接受 表单      更新时间：2023-09-26

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();
相关文章：