-2

I am creating a multi-step registration form (most likely with Jquery)which previews the user's selections into a complete profile preview right below the form. For example, if the user wrote a tagline and clicks away from the text field, then the preview will automatically update.

How can I do this with Javascript? Do I need any other languages?

Lifeislifebutwhatiswhat
  • 59
  • 1
  • 3
  • 8
  • Hi and welcome. I would suggest looking for some tutorials on the subject, it will help your learning. Your question is a bit too general as it stands. SO works best when you show what you have tried so far, and explain the specific error or problem you are facing. Good luck... – wwkudu Nov 08 '15 at 05:35
  • Hi thank you for the reply. I'm actually new to web dev so I am also asking for a comprehensive starting point too sorry lol. – Lifeislifebutwhatiswhat Nov 08 '15 at 05:38

2 Answers2

1

It's possible with jQuery. You have to select your target html element with jQuery.

$('#text').on('change', function(){
  var textValue = $(this).val();
  $('.result').html(textValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" name="name" />  
<div class="result"></div>
Omar
  • 527
  • 5
  • 21
0

I create a simple example that do what you want.

HTML

<div class="col-md-6">
<h1>Form</h1>
  <form role="form">
 <div class="form-group">
   <label for="name">Name:</label>
   <input type="text" name="name" class="form-control bind" id="name" placeholder="Enter Name">
 </div>
 <div class="form-group">
   <label for="tagline">Name:</label>
   <input type="text" name="tagline" class="form-control bind" id="tagline" placeholder="Enter tagline">
 </div>
 <div class="checkbox">
   <label>
     <input type="checkbox"> Check me out
   </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-6">
<h1>Profile</h1>
  <h1 id="bind-name"></h1>
  <h4 id="bind-tagline"></h4>
</div>

Jquery:

$('.bind').on('change', function(){
   $this = $(this);
   element_name = $this.attr('name');
   $('#bind-'+element_name).html($this.val());
});

you can check it here: http://www.bootply.com/h7CKrnNtWw

Salah
  • 139
  • 6