Demo

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用户名的元素并获取它的当前值

Demo

Answer 2

首先，不要使用单击按钮事件，而是使用表单的提交事件（因此当用户按下回车键时它将起作用）

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

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

Answer 3

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

选中此Sample jsfiddle

Answer 4

试试这个

<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");
          });  

      }
  });
});

从输入中获取值并根据值jquery进行检查

4 个答案:

Demo