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

Question

Html input:

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

                        }
                });
            }
    }

e and p variables are returning empty string (while printing on console). Added the code on jsfiddle Please help me to find out the problem.

Answer 1

In my opionion you just have to change your script (that is half javascript and half jquery with also some errors) in order to have a more clear code...

Here you have a working fiddle for 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> 

And here you have a javascript solution:

 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>