jquery - 从输入中获取值并根据值 jquery 检查它

Question

基本上我有2个输入：

<input type="text" style="height: 30px;" class="input-xlarge" placeholder="Username" name="username" id="username" required><br /><br />
<input type="password" style="height: 30px;" class="input-xlarge" placeholder="Password" name="password" id="password" required><br /><br />

基本上，

我想检查这两个输入中的值，并将它们检查为所述值（稍后检查到数据库，但现在用于检查目的），然后淡入新页面..

我该怎么做呢？

我开始了..：

$(function() {
    $("#submit").click(function() {
        //do check
    });
});

Answer 1

你要这个

$(function() {
    $("#submit").click(function() {
        var username = $('#username').val(),
            password = $('#password').val();
        alert(username + ' ' + password )
    });
});

这是非常简单的东西，但$('#username').val()意味着使用 id 用户名获取元素并获取它的当前值

演示

Answer 2

尝试这个

<div id="container"><form name="myForm">
<input type="text" style="height: 30px;" class="input-xlarge" placeholder="Username"    name="username" id="username" required><br />
<input type="password" style="height: 30px;" class="input-xlarge" placeholder="Password" name="password" id="password" required><br />   
<input type="submit" id="submit" value="Submit">
</form></div>   

$(function() {
  $("#submit").click(function() {
      var username = $("input#username").val().length;
      var password = $("input#password").val().length;

      if (username == 0){
          alert("Please enter your username");
          $("input#username").focus();
          return false;
      }
      else if (password == 0) {
          alert("Please enter your password");
          $("input#password").focus();
          return false;
      }
      else {
          //do a ajax form submit here and if it's success put below code in ajax success {}

          //removing all the contents form from the container div
          $("div#container").empty();

          //then load you next page (page you want to load after login success)

          $("div#container").fadeOut("fast");
          $("div#container").load("yourNewPage.html", function(){
             //fade in the div after loading the yourNewPage.html page 
             $("div#container").fadeIn("slow");
          });  

      }
  });
});

Answer 3

首先，不要使用点击按钮事件，而是使用表单的提交事件（所以当用户按下回车时它会起作用）

请记住在函数末尾使用 return false 。要获取输入的值，请使用 .val()

jQuery(document).ready(function($) {
    $('#form').submit(function(){
        var user = $('input[name="username"]').val(),
        pwd = $('input[name="password"]').val();
            return false;
    })
});

Answer 4

$(function () {
    $("#submit").click(function () {
        console.log($'#username').val());
        console.log($('#password').val());
    });
});

检查此示例 jsfiddle