Preview for form contents 1

[Qrosity]

Hi there everyone !
I have a classical form wich some questions like:
City:
Address:
Zip:
I also have a link which makes a hidden layer called "formpreview" visible and i would like the user to be able to see what he/she have already filled in the form when clicking this link. It is not the submit button, just a link that will make a hidden layer appear saying:
City: Whatever was written
Adress: ''
Zip: ''
I'm a Javascript ignorant so I was doing some pranky experiments in order to see if I get any results, but nothing:
-------------------------------------
function showmenow(object,val) {
document.getElementById(object).style.visibility = val;
var street2 = document.getElementById('street');
var zip2 = document.getElementById('zip');
document.write(street2);
document.write(zip2);
}
-------------------------------------
Any hints??? I'm completely desperate with this...

 

[dwarfthrower]

[tt]document.getElementById[/tt] will return an object, which isn't exactly something you can [tt].write[/tt] back out to the document as [tt]document.write[/tt] expects a string as an argument.

var streetValue = document.getElementById('street').value;
var streetHTML = "<label>Street:</label><span>" + streetValue + "</span>";
document.getElementById(object).innerHTML = streetHTML;

Also you haven't shown your HTML or how you're calling the function - The way you're treating your two arguments means that they need to be passed as strings (ie with quotes).

On a philosophical note:

i would like the user to be able to see what he/she have already filled in the form when clicking this link.

Can the users not see what they have entered into the form by looking at the form?

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[Qrosity]

What you say is true, user can read the form by himself, the fact is that I'm trying to achieve something more complex but don't even know how to explain it...
By the way, the way you told me to do it works fine, but destroys all the previous content in the hidden layer and only shows the result (which is great) is it possible to catch the values in the first function and invoke them after from hidden layer?? Something like:
(For the invoking function)
---------------------------------------
function showmenow(object,val) {
document.getElementById(object).style.visibility = val;
var streetValue = document.getElementById('street').value;
var zipValue = document.getElementById('zip').value;
}
---------------------------------------
(Inside the layer)
---------------------------------------
<div id="whatever">
<script language="JavaScript1.2">
document.write(streetValue);
document.write(zipValue);
</script>
</div>
---------------------------------------
Cause I need to keep the things inside the layer, would ne fantastic to be able to place thos values inside hidden fields, to resend them to a different database...

 

[dwarfthrower]

Yes, there are a number of ways you can do that. What I gave was just a cut-down example of how to correctly use what you were using.

You could use an array to store Label/Value pairs:

labelValueArray = new Array();
labelValueArray[0] = ["Street", document.getElementById('street').value];
labelValueArray[1] = ["Zip", document.getElementById('zip').value];

For as many value pairs as you have fields on your form.

Then build a string when you're ready to display taking the values from the array:

strPreviewHTML = "";
for(var i = 0; i < labelValueArray.length; i++){
  strPreviewHTML += "<p><label>" + labelValueArray[i][0] + ": </label><span>" + labelValueArray[i][1] + "</span></p>";
}
document.getElementById(object).innerHTML = strPreviewHTML;

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[Lowet]

Use this JavaScript:

var elist = [  {label:'City', name:'city'},
               {label:'Street address', name:'addr'},
               {label:'Zip code', name:'zip'}  ];

function showPreview() {
var html = '', lab, val;
   for (var i=0; i<elist.length; i++) {
   lab = elist[i].label;
   val = document.forms[0][elist[i].name].value;
   html += '<span><b>'+lab+'</b> '+val+'</span><br />';
   }
document.getElementById('formpreview').innerHTML = html;
document.getElementById('formpreview').style.display = 'block';
}

function hidePreview() {
document.getElementById('formpreview').style.display = 'none';
document.getElementById('formpreview').innerHTML = '';
}