jQuery change text of paragraph span tag according to the value of form input

Question

I have a class of 'friends-name' on the span of the paragraph that should take the value of 'input[name="friends-first-name"].

I have a class of 'your-first-name' on the span of the paragraph that should take the value of 'input[name='your-first-name'].

My code is as follows:

           <div class="form-message">
                <p>Hey <span class="friends-name">[Friend's First Name],</span></p>
                <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p>
                <p>I'll let you guys take it from there!</p>
                <p class="your-first-name">[Your First Name]</p>
            </div>


           <form id="referral-form" method="POST">

                    <div class="form-left">
                        <div class="form-fieldset form-fieldset_type-personal">
                            <h3 class="form-fieldsetHeading">Your Info</h2>
                            <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name">
                            <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name">
                            <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-right">
                        <div class="form-fieldset form-fieldset_type-friends">
                            <h3 class="form-fieldsetHeading">Friend's Info</h2>
                            <div data-bind="foreach: friends">
                                <div class="form-friend">
                                    <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name">
                                    <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name">
                                    <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company">
                                    <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email">
                                </div>
                            </div>

                        </div>
                    </div>
            </form>

Any way to do this using jQuery?

Answer 1

If you want to update it on each user input, Use keyup event.

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus.

Try this:

$('[name="your-first-name"]').on('keyup', function() {
  $('.your-first-name').text(this.value);
});

$('[name="friends-first-name"]').on('keyup', function() {
  $('.friends-name').text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-message">
  <p>Hey <span class="friends-name">[Friend's First Name],</span>
  </p>
  <p>I wanted to reach out b/c I bumped into a solid company. They do fulfillment - shipping - for rising stars</p>
  <p>I'll let you guys take it from there!</p>
  <p class="your-first-name">[Your First Name]</p>
</div>


<form id="referral-form" method="POST">

  <div class="form-left">
    <div class="form-fieldset form-fieldset_type-personal">
      <h3 class="form-fieldsetHeading">Your Info</h3>
      <input class="form-field" data-bind="value: firstName" type="text" name="your-first-name" placeholder="First Name">
      <input class="form-field" data-bind="value: lastName" type="text" name="your-last-name" placeholder="Last Name">
      <input class="form-field" data-bind="value: email" type="email" name="your-email" placeholder="Email">
    </div>
  </div>

  <div class="form-right">
    <div class="form-fieldset form-fieldset_type-friends">
      <h3 class="form-fieldsetHeading">Friend's Info</h3>
      <div data-bind="foreach: friends">
        <div class="form-friend">
          <input class="form-field" data-bind="value: firstName" name="friends-first-name" type="text" placeholder="First Name">
          <input class="form-field" data-bind="value: lastName" name="friends-last-name" type="text" placeholder="Last Name">
          <input class="form-field" data-bind="value: company" name="friends-company" type="text" placeholder="Company">
          <input class="form-field" data-bind="value: email" name="friends-email" type="email" placeholder="Email">
        </div>
      </div>

    </div>
  </div>
</form>

Fiddle here

Answer 2

If you want text from input.

$("span.friends-name").text($("input[name='your-first-name']").val());