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

Answer 1

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 name s 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.