Custom Live Validation Function - javascript

I've been trying to create my own custom LiveValidation (LiveValidation.com) function that connects to a database and checks if a username already exists. This is the relevant part of the form:
Username: <input type="text" name="username" id="username" class="textinput">
<script type="text/javascript">
var username = new LiveValidation('username');
username.add( Validate.Presence );
username.add( Validate.Length, { minimum: 3, maximum: 12 } );
username.add( Validate.Username );
</script>
This is my Validate.Username function:
Validate.Username = function(value, paramsObj){
var paramsObj = paramsObj || {};
var message = paramsObj.failureMessage || "Sorry that username is taken!";
var http = new XMLHttpRequest();
var url = "usernamecheck.php";
var params = "username="+value;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
if(http.responseText == 'yes') {
return true;
} else {
Validate.fail(message);
return false;
}
}
}
http.send(params);
}
Here's the relevant part of usernamecheck.php:
if(mysql_num_rows($query) != 0 && $query) {
echo "no";
} else if ($query) {
echo "yes";
} else {
echo "err";
}
The function seems to work fine (if I put alert('fail') above Validate.fail(message); I get an alert when a used username is used), but LiveValidation never shows the error message. Anyone know what I've done wrong?
Thanks

Hmmm... just looking at it real quick, could it be that "message" is not defined in your function ? It is defined in the parent function.

Related

how to send very long data in ajax url?

i am using php and ajax together to access data from user and insert into database.problem is that it works fine with small string but when i try to send data on 10000 characters browser prompts an error saying url to long.. i can make change in php but i want it to be dynamic so i have to it using this way only.. help me plz.
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php?title="+x+"&description="+y, true);
xhttp.send();
}
}
You cannot transfer large data via url (as messerbill said). You have to send them in the Body:
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("title="+x+"&description="+y");
}
}
inside the PHP-Script you get the data via the $_POST Array, not via the $_GET Array!

Invalid method piSession.buildPageInteractionSession

hi I wrote simple AJAX call to php file I am getting error in my console . Request should go to the server and return back in the html input field . i am not able to solve
Below is my Code
HTML:
<label>Input your text: </label><input type="text" id="user_text" onkeyup="update1()"/></br></br>
<label>Response here: </label><input type="text" id="server_response" readonly/>
Javascript:
function update1(){
var current_text = document.getElementById("user_text").value;
var http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
};
PHP:
<?php
$data = $_GET;
$user_text = $_GET['user_text'];
$response = strtoupper($user_text)
echo $response;
?>
Error in the console :
Uncaught (in promise) Object {message: "Invalid method piSession.buildPageInteractionSession", stack: "Error: Invalid method piSession.buildPageInteracti…on↵ at true-key://data/scripts/core.js:10:8889"}
Your code is wrong.
It should be:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("server_response").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://localhost/inderstand_Ajax/server.php?user_text="+current_text, true);
xhttp.send();
and not:
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
document.getElementById('server_response').value = response;
}
http.open("GET" , "http://localhost/inderstand_Ajax/server.php?user_text="+current_text , true);
http.send();
}
you cannot send the request inside onreadystatechange.
This problem occurred also for me today.
I removed true-key from my chrome-browser and now the error in the console is gone.
Try remove true-key from your chrome-browser and tell if the error still occurs in the console.
This is a problem with the latest version (at time of writing) of the True Key chrome extension.

$_POST not returning a value

I've been searching for an answer to this for several days now, but if I missed the answer in another post, let me know.
I'm trying to get into Ajax, so I have a very simple form in my index.php, with separate php and javascript files:
index.php
<div id="ajax-test">
<form action="ajax/ajax.php" method="POST">
<textarea name="someText" id="some-text" placeholder="Type something here"></textarea>
<button type="button" onclick="loadDoc()">Submit</button>
</form>
<div id="ajax-text"></div>
</div>
main.js:
function getXMLHttpRequestObject() {
var temp = null;
if(window.XMLHttpRequest)
temp = new XMLHttpRequest();
else if(window.ActiveXObject) // used for older versions of IE
temp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
return temp;
}// end getXMLHttpRequestObject()
function loadDoc() {
var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = function() {
if(ajax.readyState == 4 && ajax.status == 200) {
document.getElementById('ajax-text').innerHTML = ajax.responseText;
console.log(ajax.responseText);
}
};
ajax.open("POST", "ajax/ajax.php", true);
ajax.send();
}
ajax.php:
<?php
print_r('\'' . $_POST['someText'] . '\' is what you wrote');
?>
Whenever I try to print, it prints: " '' is what you wrote " - what am I missing/not doing/doing incorrectly that isn't allowing me to access the content of someText? I've changed my naming convention, swapped from single quote to double quote, tried GET instead of POST, but nothing worked.
You can try to set a header request and also put the data inside the send. Here an example as like as-
ajax.open("POST", "ajax/ajax.php", true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send("someText="+document.getElementById('some-text').value);
This is probably beacuse of the error
Undefined index: someText in C:\xampp\htdocs\ssms\sandbox\ajax\ajax.php on line 3
You had a couple of issues with your code which i don't have time to list out now. This should work fine, plus i used the onkeyup() function to display the text live without even clicking on the submit button.
The Index File
<div id="ajax-test">
<form method="POST" onsubmit="return false;">
<textarea onkeyup="loadDoc()" name="someText" id="someText" placeholder="Type something here"></textarea>
<button type="button" onclick="loadDoc()">Submit</button>
</form>
<div id="ajax-text"></div>
</div>
<script type="text/javascript" src="main.js"></script>
The Main Javascript file
function _(x) {
return document.getElementById(x);
}
function ajaxObj ( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200) {
return true;
}
}
function loadDoc() {
var someText = _("someText").value;
var ajax = ajaxObj("POST", "ajax/ajax.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
_('ajax-text').innerHTML = ajax.responseText;
console.log(ajax.responseText);
}
}
ajax.send("someText="+someText);
}
The PHP AJAX File
if(isset($_POST['someText'])){
$someText = $_POST['someText'];
echo "\"$someText\"" . ' is what you wrote';
exit();
} else {
echo "An error occured";
exit();
}

Javascript string comparison error

I have a problem with a piece of code that I use to check if a function returns a string that is equal to another string. The problem sounds trivial, but I cannot seem to get it to work.
Here is the code, and make sure you yell at me if you'll need any more code.
<script>
function emptyElement(x){
_(x).innerHTML = "";
}
function login(){
var e = _("email").value;
var p = _("password").value;
if(e == "" || p == "") {
_("status").innerHTML = "Fill out all of the form data";
} else{
_("loginbtn").style.display = "none";
_("status").innerHTML ='please wait...';
var ajax = ajaxObj("POST", "index.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
document.write(ajax.responseText); // returns "login_failed" when I try it
if(ajax.responseText == "login_failed"){
_("status").innerHTML = "Login unsuccessful, please try again.";
_("loginbtn").style.display = "block";
} else {
//window.location = "afterlogin.php?u="+ajax.responseText;
}
}
}
ajax.send("e="+e + "&p="+p);
}
}
</script>
The window.location function is commented out for testing purposes. Don't mind that. Below, I will post code for the two scripts that are used, "main" and "ajax".
function ajaxObj( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
And the code for main.js
function _(x){
return document.getElementById(x);
}
I do not want to take credit for the original code; it is gathered from developphp.com and just altered slightly.
The problem is that, as I've commented, the line
ajax.responseText == "login_failed"
never seems to be true, not matter how I do. This is what I need guidance on.
Regards
It's too late for the answer, but someone may have the same issue.
You need to write
ajax.responseText == '"login_failed"';

Error to getting response while sending ajax request

I'm new to Ajax. I'm writing two function in one file called home.php and make an Ajax call to members.php.
My problem is when I send an data with ajax call I fail to get response.
home.php
<script language="javascript" type="text/javascript">
var httpObject=false;
var httpObject1=false;
if(window.XMLHttpRequest){
httpObject = new XMLHttpRequest();
httpObject1 = new XMLHttpRequest();
}else if(window.ActiveXObject){
httpObject = new ActiveXObject("Microsoft.XMLHttp");
httpObject1 = new ActiveXObject("Microsoft.XMLHttp");
}
function logout(){
if(httpObject.readyState == 4 && httpObject.status == 200){
var response = httpObject.responseText;
if(response == "logout"){
window.location.href="index.php";
}
else{
error.innerHTML = "Sorry, Invalid Login.";
}
}
}
function get_Request_Member_List(type){
var member_Type = type;
var queryString = "?data1=" + member_Type ;
if(httpObject1.readyState == 4 && httpObject1.status == 200){
var response = httpObject1.responseText;
document.getElementById(type).innerHTML = response;
}
}
httpObject.open("GET", "logout.php" ,true);
httpObject.send(null);
httpObject1.open("GET", "members.php"+queryString ,true);
httpObject1.send(null);
</script>
members.php
<?php
echo "hello";
?>
Don't forget to add an onreadystatechange event handler to your XMLHTTPRequest, e.g.:
httpObject.onreadystatechange = logout;

Categories

Resources