PDA

View Full Version : Form Data help



chasery
06-13-2008, 02:57 PM
<script type="text/javascript">
window.onload=function()
{
var df=document.forms;
df[0].onsubmit=function()
{
var view=document.getElementById('contact_right').getElementsByTagName('label'),
name=document.getElementById('contact_left').getElementsById('form_name')
address=document.getElementById('contact_left').getElementsById('form_address')
city=document.getElementById('contact_left').getElementsById('form_city')
for(var i=0;i<view.length;i++)
{
view[i].firstChild.nodeValue=name[i].value;
}
return false; // This will disable the purpose of your submit.
}
}
</script>


<div id="contact_left">
<h2>Contact Information</h2>
<form action="#" method="#">
<label for="name">Name:</label>
<input class="input" type="text" id="form_name">
<br />
<label for="address">Address:</label>
<input class="input" type="text" id="form_address">
<br />
<label for="city">City:</label>
<select class="select" id="form_city">
<option value="1">Beaverton</option>
<option value="2">Hillsboro</option>
<option value="3">Portland</option>
<option value="4">Tannasbourne</option>
<option value="5">Tigard</option>
<option value="6">Vancouver</option>
</select>
<br />
<input class="submit" type="submit" value="Submit">
</form>
</div>
<div id="contact_right">
<h2>Your Information</h2>
<form action="#" method="#">
Name: <label>Name</label><br>
Address: <label>Address</label><br>
City: <label>City</label><br>
</form>
</div>

Ok, so I am just trying to take form data and display it in another div sitting right next to it. I broke each field down into different variables in the script because I don't know if I could take the data from the select box field. I assume at this point, it is actually grabbing each value??? How would I go about getting that to display? At this point, it doesn't, big suprise. lol

On top of that, how do I take that value that will eventually be retrieved by the javascript for the select box and turn it back into that "option name" when it is outputted in the other contact_right div?

rangana
06-14-2008, 01:18 AM
This was the script i've given to you. Apologies, if it is giving you much trouble.

First, ID is unique, So this part is erroneous:


name=document.getElementById('contact_left').getElementsById('form_name')


See if this script helps:


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