jQuery根据表单输入的值更改段落span标签的文本

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

如果要输入文本。

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