Form Post using AJAX and DHTML

**chasery** · 06-11-2008, 06:56 PM

I am not 100% positive this is the correct forum to post in, but I am looking for some help understanding the world of ajax. I am a designer and have a pretty solid understanding of css and html but right now, this is stumping me.

I am looking to learn how to take user input information in a form (text boxes and select boxes) and display it in a div sitting right next to the form. I.E. a name, a address, and a select box with a city upon a push of a submit button. I have been reading through tutorials and I think I have confused myself even more.

I just want to be able to say "Hey you, you go here!" But I am lacking the language knowledge to do so.

Any help or guidance would be greatly appreciated.

This is basically what I am wanting to do.

**rangana** · 06-12-2008, 12:53 AM

JS can do this. The script that might work is:

Code:

<script type="text/javascript">
window.onload=function()
{
	var df=document.forms;
		df[0].onsubmit=function()
			{
			var view=document.getElementById('view').getElementsByTagName('label'),
			accept=document.getElementById('inp').getElementsByTagName('input');
			for(var i=0;i<view.length;i++)
				{
				view[i].firstChild.nodeValue+=accept[i].value;
				}
			return false; // This will disable the purpose of your submit.
			}
}
</script>

Its full implementation is seen through:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0;}
#wrap
{
width:470px;
height:150px;
margin:20px auto;
background:#2d2d2d;
color:#fff;
padding:20px;
font-family:Trebuchet MS, Verdana, Tahoma;
font-size:10pt;
}
label{
display:block;
width:100px;
float:left;
}
#inp
{
width:310px;
float:left;
}
input{margin-bottom:5px;}
h1{font-size:14pt;margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload=function()
{
	var df=document.forms;
		df[0].onsubmit=function()
			{
			var view=document.getElementById('view').getElementsByTagName('label'),
			accept=document.getElementById('inp').getElementsByTagName('input');
			for(var i=0;i<view.length;i++)
				{
				view[i].firstChild.nodeValue+=accept[i].value;
				}
			return false; // This will disable the purpose of your submit.
			}
}
</script>
</head>
<body>
<div id="wrap">
	<div id="inp">
	<h1>Contact Information</h1>
	<form action="#" method="#">
	<label>Name: </label><input type="text"><br>
	<label>Address: </label><input type="text"><br>
	<label>City: </label><input type="text"><br>
	<input type="submit" value="Submit" style="margin-left:100px;">
	</form>
	</div>
	
	<div id="view">
	<h1>Your Information</h1>
	<form action="#" method="#">
	<label>Name: </label><br>
	<label>Address: </label><br>
	<label>City: </label><br>
	</form>
	</div>
</div>
</body>
</html>

Hope it helps.

**chasery** · 06-12-2008, 05:01 PM

http://www.chasery.com/wi

You can check it out there, I have implemented it, literally copying and pasting over every thing, but it didn't display.

**thetestingsite** · 06-12-2008, 05:11 PM

Add the highlighted in the below snippet:

Code:

   <div id="inp" class="content_left">
    <h2>Contact Information</h2>
	<form action="#" method="#">

	 <label>Name: </label><input class="input" type="text"><br>
	 <label>Address: </label><input class="input" type="text"><br>
	 <label>City: </label><input class="input" type="text"><br>
	 <input type="submit" class="submit" value="Submit">
	</form>
   </div>
   <div id="view" class="content_right">

    <h2>Your Information</h2>
	<form action="#" method="#">
	 <label>Name: </label><br>
	 <label>Address: </label><br>
	 <label>City: </label><br>
	</form>
   </div>

Hope this helps.

**chasery** · 06-12-2008, 10:14 PM

Ok that is semi working. Thanks for getting me so far in comparison to where I was yesterday. :P

www.chasery.com/wi2

How would I go about clearing those labels on each submit push prior to the new input going in? As you can see it just keeps adding that value on until it breaks the div. lol

A major issue that I am having is how to transfer that select box's information over? If some one selects one of the cities, how do you take that text and not a value for the option that is in the <INPUT type="select">?

**thetestingsite** · 06-12-2008, 10:21 PM

How would I go about clearing those labels on each submit push prior to the new input going in? As you can see it just keeps adding that value on until it breaks the div.

Remove the highlighted in the line below:

Code:

view[i].firstChild.nodeValue+=accept[i].value;

Hope this helps.

**chasery** · 06-12-2008, 10:46 PM

Ok thanks testing!

I have been trying to figure out, can I replace that line of code to sit some where specific? Like can I assign some ids to recieve the bits of information from the form? I am just slightly confused as to how javascript can take all three values and memorize it and put it out in the correct spots with only one command. wouldn't it make sense that you would need a command to say "form_name" you need to go to span "your_name" or what ever? and so on with the address and the city? Sorry if I am really confusing, but at this point, I am not up to date with all of the terminology. lol

A major issue that I am having is how to transfer that select box's information over? If some one selects one of the cities, how do you take that text and not a value for the option that is in the <INPUT type="select">?

Thread: Form Post using AJAX and DHTML

Thread Tools

Search Thread

Form Post using AJAX and DHTML

The Following User Says Thank You to rangana For This Useful Post:

The Following User Says Thank You to thetestingsite For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions