Hello,
I wonder can someone help me. [onkeyup] I am trying to transfer user input fields from a form so that the user can preview what they have entered in a div on the same page (i.e. prior to submiting).
e.g.
1st Line - Name: This is my Name
2nd Line - Profession: This is my Profession
<div>
Copy of 1st Line - Name: This is my Name
Copy of 2nd Line - Profession: This is my Profession
</div>
[onkeyup]
In this case onblur= is more useful.
This
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function copyThem() {
var oDiv = document.getElementById('copy')
oDiv.innerHTML = ''
var cINs = document.getElementsByTagName('input')
for (j = cINs.length, i = 0; i < j; i++) {
oDiv.innerHTML += '<BR>' + cINs[i].id + ": " + cINs[i].value
}
}
function okThem() {
var bOK = confirm('Are you sure?')
if (bOK) {
alert('Done!')
} else {
var oDiv = document.getElementById('copy')
oDiv.innerHTML = ''
var cINs = document.getElementsByTagName('input')
for (j = cINs.length, i = 0; i < j; i++) {
cINs[i].value = ''
}
}
return bOK
}
</script>
<title></title>
</head>
<body>
<form>
<input id='Name' onblur="copyThem()">
<input id='Profession' onblur="copyThem()">
</form>
<button onclick="return okThem()">CONFIRM</button>
<div id='copy'></div>
</body>
</html>should give you the idea.
Thanks for your prompt reply. I really appreciate it. It works, it is displaying all the input tag content in the div. However I realise since I posted my request that there is a need to display a selected radio button and its value in the div. (at the moment it is displaying all the radio button options regardless of whther they are slected or not) Is there a way to only preview selected, checked form elements in the div rather than all input values?
<script type="text/javascript">
function copyThem() {
var oDiv = document.getElementById('copy')
oDiv.innerHTML = ''
var cINs = document.getElementsByTagName('input')
for (j = cINs.length, i = 0; i < j; i++) {
oDiv.innerHTML += '<BR>' + cINs[i].value
}
}
</script>
Thanks.
Try this:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id='copy'></div>
<input type="radio" name="changer" value="You Clicked Show" onclick="document.getElementById('copy').innerHTML=this.value;"> Show<br>
<input type="radio" name="changer" value="You Clicked Hide" onclick="document.getElementById('copy').innerHTML=this.value;"> Hide
</body>
</html>If you want to preview the form
entries before submit then
'you should not use
<form type="post" action"xx.php">
you must submit the form through javascript
document.formname.submit
preview selected, checked form elements in the div
There are many approaches.
My demo echos all <input> elements on the entire page [because that is what you seemed to be asking for]. By organizing elements into <div>s you could easily limit the echoing to the 'important' <div> [or <div>s].
Or, you can leave the elements where they are and add an attribute [e.g, title='important'] to those you want echoed (and adjust my code accordingly). This is probably easier than making a list of the various id= values to be echoed.
Or, you can simply modify my code to include the specific button(s) you want and ignore any other(s). I will post a demo of that approach.
Here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
function copyThem() {
var oDiv = document.getElementById('copy')
oDiv.innerHTML = ''
var cINs = document.getElementsByTagName('input')
for (j = cINs.length, i = 0; i < j; i++) {
with(cINs[i]) {
if (getAttribute('onmouseout')) {
if (getAttribute('type') != 'radio' || checked) {
oDiv.innerHTML += '<BR>' + id + ": " + value
}
}
} // with
} // for
} // func
function okThem() {
return confirm('Are you sure?')
}
</script>
<title></title>
</head>
<body>
<form>
<input onmouseout="copyThem()" type="radio" id="Citizen" name="citizen" value="Yes">Yes<br>
<input onmouseout="copyThem()" type="radio" id="Citizen" name="citizen" value="No">No<br>
<input onmouseout="copyThem()" id='Name'>
<input onmouseout="copyThem()" id='Profession'>
<br>
<input type="radio" name="whatever" value="Yes">Yes<br>
<input type="radio" name="whatever" value="No" checked>No<br>
</form><button onclick="return okThem()">CONFIRM</button>
<div id='copy'></div>
</body>
</html>is a revised demo.
Line 14 excludes any element from copying that does not have an onmouseout= attribute. (This little trick operates on the obvious assumption that all 'important' elements will have that attribute - so it is not necessary to mark or segregate them in any other way.)
Line 15 excludes unchecked radios from being copied.
BTW: I eliminated the 'clear' logic from ckThem() ; it occurred to me that leaving the un-confirmed entries to be edited was better for the user than forcing a complete do-over by clearing them all.
This code as originally written worked as expected in IE8, Opera and Firefox. Chrome and Safara(pc) [both based on WebKit] apparently don't fire onblur= for radio buttons. Accordingly, I have changed over to onmouseout= (which appears to work as needed in 'all' browsers).
There are many approaches.
My demo echos all <input> elements on the entire page [because that is what you seemed to be asking for]. By organizing elements into <div>s you could easily limit the echoing to the 'important' <div> [or <div>s].
Or, you can leave the elements where they are and add an attribute [e.g, title='important'] to those you want echoed (and adjust my code accordingly). This is probably easier than making a list of the various id= values to be echoed.
Or, you can simply modify my code to include the specific button(s) you want and ignore any other(s). I will post a demo of that approach.
Hi fxm,
Thanks for all your help. I wonder can you advise me a little further. I am almost there with the solution I need. I want to be able to print a .jpg depending on the radio button selected in the div. Is it possible to wrap the html around the value so that it pulls the corresponding image from the images folder? I have outlined what I mean below (I know it's not correct but it should give you an idea)
oDiv.innerHTML += '<BR><img src="images/' + value + '.jpg" alt="alt here" title="title here">'
Thanks for any time you can give this.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.