Hello everyone,
I bought a book and began learning how to use AJAX and my friend gave me a practice assignment where I have to enter values into one div and perform an AJAX get request to a website she gave me to receive the information in the right div. Maybe I am doing the AJAX get request incorrectly following this book. If anyone could point me in the right direction I would appreciate it. This is not for school, and I have no experience in web scripting languages but willing to learn! Just give my javascript a look and maybe you can help me out. I am not sure yet on how to display the information after it has been received but I know for sure I do not want to load another page when hitting the submit button!
Also, I have a weird way of lining up my code from programming in C++ for about 4 years now. I have developed it over time and sorry if it is hard to understand. If so, then I can format it a proper way and re-post. Also, I am trying to learn how to use the AJAX GET method, not the POST method. And I want to return the information in JSON.
Code:
<html>
<head>
<style type="text/css">
#header {
text-align: left;
}
#wrapper {
margin:bottom;
width:100%;
}
#sub-left {
float:left;
width:225px;
height:215px;
border:1px solid black;
position: relative;
text-align: left;
}
#sub-right {
padding-left: 66px;
float:left;
width:60%;
height:45%;
border:1px solid black;
position: relative;
text-align: left;
}
#sub-leftmost {
float:left;
width:10%;
height:100%;
position: relative;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sub-leftmost">
</div>
</div>
<div id="wrapper">
<div id="header"><h1>Quiz</h1></div>
<div id="sub-left">
<form name = 'testForm'>
<FONT COLOR="CC3300",font size="5"> <b>User Info</b></FONT>
<br />
Full Name: <br /><center><input type="text" size="25" id = "namebox" /></center>
Email Address: <br /><center><input type="text" size="25" id = "ebox" /></center>
Address: <br /><center><input type="text" size="25" id = "addbox" /></center>
Phone Number: <br /><center><input type="text" size="25" id = "phnbox" />
<a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>
</form>
</div>
</div>
<div id="wrapper">
<div id="sub-right">
<script type=”text/javascript”>
// function create GetXmlHttpObject
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
function submitFormWithAjax(){
var myAjaxGetrequest = new GetXmlHttpObject();
var t2lName=document.testForm.namebox.value;
var t2lEmail=document.testForm.ebox.value;
var t2lAddress=document.testForm.addbox.value;
var t2lPhone=document.testForm.phnbox.value;
var parameters=”name=”+t2lName+”&email=”+t2lEmail+”&address=”+t2lAddress+”&phone=”+t2lPhone;
myAjaxGetrequest.open(“GET”, “website to send and receive from”, true);
myAjaxGetrequest.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
myAjaxGetrequest.send(parameters);
myAjaxGetrequest.onreadystatechange=function(){
if (myAjaxGetrequest.readyState==4){
if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){
document.getElementById("result").innerHTML=myAjaxGetrequest.responseText
document.getElementById(“testForm”).style.display = “none”;
}
else {
document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;
}
}
}
}
</script>
</div>
</div>
</body>
</html>
I changed up my code till it was like yours. I am not sure why it posted like it did, but I use notepad++ in html format for editing. If this is incorrect please let me know. I think that when I posted it, it changed how things look, because my quotation marks are the same as yours. I do not want my submit button to open a new page, I want it to synchronously update the div on the right side to display the information. Thanks for the help that you provided me with though, I am closer now than before. I posted my updated code on pastebin.com at the below link (it looks as you described it should, yet it still doesn't look like it should but it is readable);
// ASYNCHRONOUS request
myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, true);
myAjaxGetrequest.onreadystatechange =
function() {
if (myAjaxGetrequest.readyState==4 && myAjaxGetrequest.status==200)
{
document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
document.getElementById(“testForm”).style.display = “none”;
}
};
try {
myAjaxGetrequest.send( );
} catch ( e ) {
document.getElementById(“testForm”).innerHTML =
”An error has occured making the request: ” + e.toString();
}
I dunno where you "learned" that AJAX code from, but it's a book then I'd seriously consider using it for lighting fires, instead.
NOTE: You could use the try/catch for errors with the synchronous code, as well. And/or you could check for a status other than 200, but that's seldom needed.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
When I click my submit button, it just takes me to a page that says "File not found". I do not understand why it would do this. I want to click the submit button and it issue the request with the information and display the information in the div on the right. I changed the code to what you had there (synchronous). Maybe I am doing the entire code wrong. Something weird is going on, any ideas on what I should do? Thanks for the help so far.
The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site. What do you mean by name and id? I am new to this. Should it be name instead of id? Where is the } that should not exist?
The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site.
Only a few are wrong....
<script type=”text/javascript”>
return new ActiveXObject(“Microsoft.XMLHTTP”);
document.getElementById(“testForm”).style.display = “none”;
<a href=”#” onclick=”submitFormWithAjax();”>
Quote:
Originally Posted by mrmodest
What do you mean by name and id? I am new to this. Should it be name instead of id?
yes ...
form elements usually need names.
this uses the form element name ...
document.testForm.ebox.value
Quote:
Originally Posted by mrmodest
Where is the } that should not exist?
Code:
<script type=”text/javascript”>
// function create GetXmlHttpObject
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
function submitFormWithAjax(){
var myAjaxGetrequest = new GetXmlHttpObject();
var t2lName=document.testForm.namebox.value;
var t2lEmail=document.testForm.ebox.value;
var t2lAddress=document.testForm.addbox.value;
var t2lPhone=document.testForm.phnbox.value;
var parameters = "name=" + encodeURIComponent(t2lName) + "&email=" +encodeURIComponent(t2lEmail) + "&address=" + encodeURIComponent(t2lAddress)+ "&phone=" +encodeURIComponent(t2lPhone);
myAjaxGetrequest.open("GET", "thewebsite.com" + parameters, false);
myAjaxGetrequest.send( );
document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
document.getElementById(“testForm”).style.display = “none”;
//cbuxquiz.heroku.com?
}
}
</script>
also here you are using id to access the
element but the form tag has a name ...
document.getElementById(“testForm”).style.display = “none”;
Last edited by DaveyErwin; 07-12-2012 at 06:43 PM..
The OP indicated that he "use(s) notepad++ in html format for editing". Shouldn't he be editing in code format?
__________________ ^_^
If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
* The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".
Before you post, read our: 
