Search code examples
javascriptjqueryjquery-steps

How to update a label text based on what a user types in a textbox


I'm using JQuery Steps and I'm trying to make the last step verify what the user has put in throughout the previous steps. But the problem is that its not populating the labels with the values of the previous text boxes.

This is really confusing me because i have seen many working examples on this, but mine doesn't work? Any ideas? Am i missing something?

HTML

 <label for="firstName">First Name *</label>
 <input id="firstName" name="firstName" type="text">
 <label for="lastname">last Name *</label>
 <input id="lastname" name="lastname" type="text">
 <br/><br/>

 <label for="shippingaddress">Shipping Address *</label>
 <input id="shippingaddress" name="shippingaddress" type="text">
 <br/><hr><br/>
 <p>
   Name: <label id="vname"></label>
 </p>
 <p>
   Shipping Address: <label id="vsaddress"></label>
 </p>

JAVASCRIPT

 $("#firstName,#lastname").change(function () {
var firstnameLAstName = $("#firstName").val()+ " " + $("#lastname").val();
$("#vname").text(firstnameLAstName);
 });

 $("#shippingaddress").change(function () {
var shippingAddress = $("#shippingaddress").val();
$("#vsaddress").text(shippingAddress);
 });

here is my jsfiddle: https://jsfiddle.net/7say10d8/4/

i even tried adding something to OnChanging


Solution

  • Remember import Jquery

       <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    

    its working https://jsfiddle.net/cmedina/7say10d8/5/