CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Shinichi
Shinichi

Reputation: 23

AJAX call on a javascript function doesn't work

This is actually the first time I'm using ajax so honestly I don't know a single thing. Tried to read articles about ajax but no luck. What I'm trying to do here is quite simple really I just want to try to figure out how ajax works and what I should do to make it work. I wanted it so that when I try to click the login button and go to my php and display "login success" it works when the textboxes are empty it displays fields are empty but the ajax doesn't seem to work

Here is what I've done so far this is my index.php A.K.A login page

<!DOCTYPE html>
<html>
<head>
	<title>O-Chat</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="script101.js"></script>
</head>
<body>
	<div class="content">
		<div class="features">
			<div><br><br><br><br><br><br><br><br><br><br>FEATURES HERE</div>
		</div>
		<div class="loginpart">
			<div class="banner"><br><br><br>BANNER HERE</div>
			<div class="login" id="divlogin">
				<div class="login-header">Login</div>
				<form name="loginform" class="login">
					<input class="login" type="text" name="pUname" id="jUname" maxlength="35" placeholder="Username"/><br>
					<input class="login" type="Password" name="pPass" id="jPass" maxlength="40" placeholder="Password"/><br>
					<span class="error" id="jloginerror"></span>
					<div class="button" id="login"" onclick="validate();">
					</div>
				</form>
				<div class="login-footer" onclick="location.href='register.php'">Not yet a member?<br>Register Now! Click Here!</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-container">
			<a href="index.php">Home</a> |
			<a href="aboutus.php">About O-Chat</a> |
			<a href="contactus.php">Contact Us</a>
			<div style="float: right;">Copyright © 2000 - 2017 O-Chat Unlimited (071813-S) All Rights Reserved</div>
		</div>
	</div>
</body>
</html>

Here is my javascript file script101.js

function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
	document.getElementById("divlogin").style.height = '275px';
    document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
	document.getElementById("jloginerror").innerHTML = "";
	document.getElementById("divlogin").style.height = '250px';

	$.ajax({
        type: "post",
        url: "login.php",
        data: data,
        sucess:function(data){
            $("#jloginerror").text(data);
        }
    });
}
}

<?php
	echo "very successful";
?>

Upvotes: 2

Views: 1123

Answers (2)

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

Remove $ from the function keyword and Jquery works with element id or name var uname = $("#jUname").val(); var pass = $("#jPass").val(); and do not use ; for separating and you should use , $.ajax({}), use $.ajax({}) instead of ajax({}) because its Jquery function not javascript function.

function validate() {
    var uname = $("#jUname").val();
    var pass = $("#jPass").val();
    var data = "&uname=" + uname + "&pass=" + pass;
    if(!uname.match(/\S/) || !pass.match(/\S/)) {
    	document.getElementById("divlogin").style.height = '275px';
        document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
    }
    else
    {
    	document.getElementById("jloginerror").innerHTML = "";
    	$.ajax({
    		type: "post",
    		url: "login.php",
    		data: data,
    		sucess:function(data){
    			$("#jloginerror").text(data);
    		}
    	});
    }
}

Upvotes: 1

Deep Kakkar
Deep Kakkar

Reputation: 6307

Remove $ from the function declaration $function validate(). You can not use $ here.

You can use it like either

$(function(){
....
});

OR

if you wants to keep name of your function then just remove $ before the function, simply use it as:

function validate(){
....
}

and on ajax , you can use

$.ajax({
        method: "post",
        url: "login.php",
        data: data;
        sucess:function(data){
            $("#jloginerror").text(data);
        }
    });

So your full code should be like as follows:

 function validate() {
    var uname = $("#jUname").val();
    var pass = $("#jPass").val();
    var data = "&uname=" + uname + "&pass=" + pass;
    if(!uname.match(/\S/) || !pass.match(/\S/)) {
        document.getElementById("divlogin").style.height = '275px';
        document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
    }
    else
    {
        document.getElementById("jloginerror").innerHTML = "";
        $.ajax({
            type: "post",
            url: "login.php",
            data: data,
            sucess:function(data){
                $("#jloginerror").text(data);
            }
        });
    }
}

Upvotes: 1

Related Questions