無法使用JavaScript

Question

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> 

的Javascript：

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

         } 
       }); 
      } 
    } 

e和p變量返回空字符串（而在控制檯打印）。 添加了代碼jsfiddle 請幫我找出問題所在。

Answer 1

在我opionion你只需要改變你的腳本（即一半，也有一些錯誤，javascript和jQuery的一半），以便有一個更清晰的代碼......

這裏有jQuery的工作小提琴：

$(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); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

<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>

在這裏你有一個JavaScript的解決方案：

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

<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>