I'll get to the point, assume my PHP script returns an array with two values, how would I address them within javascript?
<script type="text/javascript">
function ValidateCard(cardno)
{
if (cardno.length==0)
{
document.getElementById("txtprice").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtprice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","coding/validation/validatecard.php?cardno="+cardno,true);
xmlhttp.send();
}
</script>
As you can see whatever is returned is send to display within a div tag, how would I differentiate between data?
Thanks
You could use json to serialize it so that javascript can read it.
So, in php json_encode($arr);
http://www.php.net/manual/en/function.json-encode.php
Then in javascript.
you should be able to do something like jsarr[key] to get the values
<?php
$result = array('success'=>1, 'messgae'=>"the message you want to show");
echo json_encode($result);
?>
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
result = xmlhttp.responseText.evalJSON(true);
//you can use result as array to get the information you want to check
if (result['success']) {
document.getElementById("successs").innerHTML=result['message'];
}
}
}
Related
i am learning ajax and doing some practice. I am facing a problem. Here is my code.
<input class="category" id="design" type="button" value="Design" onclick="loadXMLDoc(design)" />
Ajax:
function loadXMLDoc(name)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var array = xmlhttp.responseText;
alert(array);
}
}
xmlhttp.open("GET","server.php?cat="+name,true);
xmlhttp.send();
}
server.php:
if(isset($_GET['cat']))
{
$cat = $_GET['cat'];
echo $cat;
}
Now, when i click on the button, the alter gives me [object HTMLInputElement] when i am expecting to get "design". What is wrong in it?
What is wrong in it?
You have to pass a string to the function:
onclick="loadXMLDoc('design')"
Currently you are passing the variable design. Since you have an element with ID "design" this variable happens to refer to that element. Then when you are trying to send the element to the server it is converted to a string. The default string representation of an input DOM element in JavaScript is "[object HTMLInputElement]".
Try this :
onclick="loadXMLDoc(this.value)"
So I've already done an AJAX request using GET, and so now i wanted to try my luck using POST instead. But for some reason, when i try to send data, I get a crazy weird message in the console - NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED: 'JavaScript component does not have a method named: "available"' when calling method: [nsIInputStream::available]
I literally have no idea what this means, and I know the data isnt going through because all im doing in the load.php file that I request is echo the variable its supposed to store. So its something in the javascript.
Here is my HTML for the first page that makes the request.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<input id="input">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
And my Javascript:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
var data = "id="+document.getElementById("input").value;
xmlhttp.open("POST","load.php",true);
xmlhttp.send(data);
}
And finally, the code for load.php:
$param = $_POST['id'];
if($param){
echo "Variable was stored.";
} else{
echo "Not working";
}
And everytime i run this, i get "not working" in the browser. So the php code is at least attempting to store the variable, but its not. Thankyou!
Your forgot to add xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'). With this line we are basically saying that the data send is in the format of a form submission
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
var data = "id="+document.getElementById("input").value;
xmlhttp.open("POST","load.php",true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
How come when I populate my textbox with what's in xmlhttp.responseText tags are shown? It shows
<!DOCTYPE html><html><body></body></html>
as well as what I want it to show. Is there a way to make it so that the tags aren't shown? The Javascript and AJAX code is as follows:
function loadDoc()
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("textbox").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","loadTextBox.php?id=4",true);
xmlhttp.send();
}
ADDED-Code for loadTextBox.php is as follows:
<?php
---placeholder for correct db login info---
$result = $mysql->query(---placeholder for correct SQL query---);
while ($row = $result->fetch_object())
{
$queryResult = $row->column_1;
}
$textboxValue = $queryResult;
echo $textboxValue;
?>
Well, I was unable to reproduce your problem, so I had to improvise slightly to get the same responseText as you. Anyway, this is what I came up with, please let me know if it doesn't work:
var doc = window.document.createElement("doc");
doc.innerHTML = xmlhttp.responseText;
document.getElementById("textbox").value=doc.innerHTML;
Replace your current instance of:
document.getElementById("textbox").value=xmlhttp.responseText;
With that.
I'm submitting a form but need my form to run some checks first so i'm calling in some javascript which needs to run an XMLHttpRequest to see if something is set on another PHP script. I can get the value back but only output the message within the area where i am getting the response, any attempt of putting this into a variable and using elsewhere doesn't work, here's my script:
function validateform() {
var complete = "Please fill in the following fields:";
var temp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
temp=xmlhttp.responseText;
alert(temp);
}
}
xmlhttp.open("GET","hrp/recaptcha/verify.php",true);
xmlhttp.send();
alert(temp);
The first "alert(temp") gets outputted but then the one after at the end of the code always says undefined so I cant use it outside.
Any ideas?
Thanks :D
It appears that you don't want an asynchronous call, in which case you'll want to do:
xmlhttp.open("GET","hrp/recaptcha/verify.php",false);
You can also remove the block:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
This is a very simple function if one where to use an input tag, unfortunately i have to use a link tag since i'm working with alphabet grouping that would retrieve the values on a different page.
here's a code i found for link tag to hold a value to be submitted to ajax
echo '<a onclick="passPagination(\'3\');passLetter(\'S\')">NEXT</a>';
i want to call all letters "s" page "3" from the other page.
function passLetter(str)
{
if (str=="")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter="+str,true);
xmlhttp.send();
}
function passPagination(str)
{
if (str=="")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?pageno="+str,true);
xmlhttp.send();
}
also i want to call again the letter that was passed to the otherpage so that i would make it as a reference for my pagination links that is also being hold in this page.
echo 'NEXT';
i am really at lost here since i am not familiar with link tag and ajax working together, also as you may have noticed i am not also that good with ajax judging from my very long ajax code.
Your help is greatly appreciated, Thank You.
i am really new at ajax. :)
The solution is to make a function with multiple arguments:
function passPaginationAndLetter(page, letter)
{
if (page=="" || letter == "")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter="+letter+"&pageno="+page,true);
xmlhttp.send();
}
You can now call this with
echo '<a onclick="passPaginationAndLetter(\'3\',\'S\')">NEXT</a>';
The difference is that you are not calling two AJAX methods, just one.
I'm not pretty sure if i got what you mean, but i guess you want to something like that
echo '<a onclick="get(\'S\', '. ($_GET['page'] + 1) .')">NEXT</a>';
function get(letter, page) {
if (!letter) {
document.getElementById("retail_group").innerHTML="";
return;
}
if (!page) {
page = 1;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter=" + letter + "&pageno=" + page,true);
xmlhttp.send();
}
if it's really that, don't forget to validate the variables got from $_GET before use that, i just didn't because it's not the point...
I think this is what you're looking for:
html
PREVIOUSNEXT
javascript
var current = {
page: 0,
letter: a
};
function ajax(url) {
var xmlhttp = window.XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function(xmlhttp) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementByI("retail_group").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function next() {
ajax("otherpage.php?letter=" + current.letter + "&pageno=" + (++current.page));
}
function previous() {
ajax("otherpage.php?letter=" + current.letter + "&pageno=" + (--current.page));
}
This code is not complete of course, it doesn't check for the max/min values of the pages, and there's no way of replace the letter, but it should point you in the right direction.