Display the data entered in a form before submitting the form

Question

i have a form where there are multiple input that needs to be entered by the user, but before submitting the form i wish to show the users how their i/p will get displayed.

My page is divided into 2 parts, one part contains the form and 2 contains the layout

<form class="form-horizontal"  enctype="multipart/form-data" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="firstname" id="input01">
            </div>
    </div>

    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="lastname" id="input02">
            </div>
    </div>

    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">Location</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="location" id="input03">
            </div>
    </div>
</form>

Now the place that i want to display the above data will be different div and this needs to be done before submit button eg:

I want that

when user types firstname, at the same instance it should be displayed under <div id="firstname"></div>,

when user types lastname , at the same instance it should be displayed under <div id="lastname "></div>,

when user types location, at the same instance it should be displayed under <div id="location"></div>,

Currently the code that i have works just for single input

<input type="text" value="">
<p></p>

$( "input" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup();

but i want something that can work for any number of input as explained in above example. Can anyone please help me with it

score 0 · Accepted Answer · answered Nov 07 '15 at 09:57

You can add special data-attribute to your input so as to clarify where the entered text should be placed. You can call it like you want, prefixing data-, let's call it data-view-id. Then you add this attribute to your input:

 <input type="text" class="form-control" name="location" id="input01" data-view-id="#location">

Next - modify your js:

$( "input" )
  .keyup(function() {
      var value = $( this ).val(),
          dataViewId = $( this ).data( "view-id" );  // get your data-attribute value
      // use this value as a selector:
      $( dataViewId ).text( value );
  })
  .keyup();

Even further - if ids of divs, where you want to place text are same as names of inputs - then you don't even need a data-attribute:

$( "input" )
  .keyup(function() {
      var value = $( this ).val(),
          dataViewId = $( this ).attr( "name" );  // get your value using `name`
      // use this value as a selector:
      $( "#" + dataViewId ).text( value );
  })
  .keyup();

And by the way - id property should be unique on a page. So it's illegal to have several elements with same id, as you currently have.

it is displaying i/p for only 1 entry, can u please provide a fiddle — , Nov 07 '15 at 10:11
above code was good but what if you have input is array and you need to store the array input value in some variable or array before submit and display it in second page in a good format.Please help me u_mulder — Lal Kumar Rai, Jan 03 '17 at 04:24

Display the data entered in a form before submitting the form

1 Answers1

Linked