Transfer the value of multiple fields in a form to a div

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

Copy of 1st Line - Name: This is my Name
Copy of 2nd Line - Profession: This is my Profession

technopup

Newbie Poster

16 posts since Jun 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

[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.

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

1 Year Ago

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?

Thanks.

technopup

Newbie Poster

16 posts since Jun 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

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
<input type="radio" name="changer" value="You Clicked Hide" onclick="document.getElementById('copy').innerHTML=this.value;"> Hide
</body>
</html>

rajarajan07

Nearly a Posting Virtuoso

1,447 posts since May 2008

Reputation Points: 167

Solved Threads: 239

1 Year Ago

If you want to preview the form
entries before submit then
'you should not use

you must submit the form through javascript
document.formname.submit

dhanapal86mca

Newbie Poster

16 posts since Nov 2009

Reputation Points: 10

Solved Threads: 1

1 Year Ago

preview selected, checked form elements in the div

There are many approaches.

My demo echos all elements on the entire page [because that is what you seemed to be asking for]. By organizing elements into s you could easily limit the echoing to the 'important' [or 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.

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

1 Year Ago

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
      <input onmouseout="copyThem()" type="radio" id="Citizen" name="citizen" value="No">No
      <input onmouseout="copyThem()" id='Name'> 
      <input onmouseout="copyThem()" id='Profession'>
	 
      <input type="radio" name="whatever" value="Yes">Yes
      <input type="radio" name="whatever" value="No" checked>No
    </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).

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

1 Year Ago

There are many approaches.

My demo echos all elements on the entire page [because that is what you seemed to be asking for]. By organizing elements into s you could easily limit the echoing to the 'important' [or 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 += '
' Thanks for any time you can give this.

technopup

Newbie Poster

16 posts since Jun 2010

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You