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);
On pastebin:
http://pastebin.com/2WNrJJaM
And, the same code here;
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: 52px;
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>
<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", "websitetosendandgetfrom.com?" + parameters, true);
myAjaxGetrequest.send( );
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>
</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">
</div>
</div>
</body>
</html>