jQuery:输入类型文本值显示在alert中

时间:2016-04-13 08:39:08

标签: javascript jquery text input

 function ValidateLogin() {
   alert($("#txtUserName").val());
   //alert($('#txtUserName').val());
 }
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Login | Profi Admin</title>
  <link href="css/960.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/text.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/login.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
  <div class="container_16">
    <div class="grid_6 prefix_5 suffix_5">
      <h1>Login</h1>
      <div id="login">
        @*
        <p class="tip">You just need to hit the button and you're in!</p>
        <p class="error">This is when something is wrong!</p>*@
        <form id="form1" name="form1" method="post" action="">
          <p>
            <label>
              <strong>Username</strong> 
              <input type="text" name="UserName" class="inputText" id="txtUserName" />
            </label>
          </p>
          <p>
            <label>
              <strong>Password</strong>
              <input type="password" name="Password" class="inputText" id="txtPassword" />
            </label>
          </p>
          <a class="black_button" onclick="return ValidateLogin();"><span>Authentification</span></a>
          <label>
            <input type="checkbox" name="checkbox" id="checkbox" />Remember me</label>
        </form>
        <br clear="all" />
      </div>
      <div id="forgot">
        <a href="#" class="forgotlink"><span>Forgot your username or password?</span></a>
      </div>
    </div>
  </div>
  <br clear="all" />
</body>

</html>

这里,在警报中,我没有获得UserName。我也试过使用单引号,但它还没有显示出来。

1 个答案:

答案 0 :(得分:2)

也许您忘了在您的网站中启用Jquery,因为在下面的示例中它可以完美运行。

function ValidateLogin() {
       alert($("#txtUserName").val());
       //alert($('#txtUserName').val());
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_16">
    <div class="grid_6 prefix_5 suffix_5">
        <h1>Login</h1>
        <div id="login">
            
            <form id="form1" name="form1" method="post" action="">
                <p>
                    <label>
                        <strong>Username</strong>                            
                        <input type="text" name="UserName" class="inputText" id="txtUserName" />
                    </label>
                </p>
                <p>
                    <label>
                        <strong>Password</strong>
                        <input type="password" name="Password" class="inputText" id="txtPassword" />
                    </label>
                </p>
                <a class="black_button" onclick="return ValidateLogin();"><span>Authentification</span></a>
                <label>
                    <input type="checkbox" name="checkbox" id="checkbox" />
                    Remember me</label>
            </form>
            <br clear="all" />
           </div>
           <div id="forgot">
            <a href="#" class="forgotlink"><span>Forgot your username or password?</span></a>
           </div>
        </div>
     </div>
    <br clear="all" />