无法使用javascript从输入表单中获取值

时间:2015-12-03 18:10:05

标签: javascript jquery html

Html输入:

<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button class="btn btn-red" onclick="logincheck();">LOG IN</button>

Javascripts:

function logincheck(){
     var e =  document.getElementById("email").value;
      p = $("#pass").val();
        console.log(e);

        if($("#email").val()==""||$("#pass").val()=="")
           alert("Email and password can't be empty");  
        else { 
            $.ajax({
                    url : "http://localhost/dsbd/loginprocess.php",
                    type: "POST",
                    data : { 
                        email : e,
                        password: p
                        },
                        dataType: 'text',
                        success: function (data) { 
                            alert(data);

                        }
                });
            }
    }

ep变量返回空字符串(在控制台上打印时)。 在jsfiddle上添加了代码  请帮我找出问题所在。

1 个答案:

答案 0 :(得分:0)

在我的opionion中你只需要更改你的脚本(这是一半的javascript和一半jquery也有一些错误),以便有一个更清晰的代码......

在这里,你有一个jquery的工作小提琴:

&#13;
&#13;
$(document).ready(function(){
  $('#my-login-button').click(function() {
    if($('#email').val().length == 0 || $("#pass").val().length == 0) {
      alert("Email and password can't be empty");  
    } else {
      $.ajax({
        url : "http://localhost/dsbd/loginprocess.php",
        type: "POST",
        data : { 
          email : $('#email').val(),
          password: $("#pass").val()
        },
        dataType: 'text',
        success: function (data) { 
          alert(data);
        }
      });
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button id="my-login-button" class="btn btn-red">LOG IN</button>
&#13;
&#13;
&#13;

这里有一个javascript解决方案:

&#13;
&#13;
function logincheck() {
  var e = document.getElementById("email").value;
  var p = document.getElementById("pass").value;
  console.log(e);
  
  if(e.length == 0 && p.length == 0) {
    alert("Email and password can't be empty");  
  } else { 
    $.ajax({
      url : "http://localhost/dsbd/loginprocess.php",
      type: "POST",
      data : {
        email : e,
        password: p
      },
      dataType: 'text',
      success: function (data) { 
        alert(data);
      }
    });
  }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button id="my-login-button" onclick="logincheck()" class="btn btn-red">LOG IN</button>
&#13;
&#13;
&#13;