CODEWITHSUNDEEP
jqueryformsinputappend
user3190635
user3190635

Reputation: 41

Live Append Form Input to HTML String

I would like to get a header for question two (and other subsequent questions) of my form to update based on what is entered in question one's text input immediately after it is entered (but before it is sent), but despite trying several solutions SO has shown me I haven't managed. Any help much appreciated! Here's my latest iteration:

My HTML:

<input type="text" class="form-control" placeholder="Dexter" name="name" style="background-color:#DFECF5;" required data-validation-required-message="Please enter your pet's name.">...

<h3>What Breed is<div id="namer"></div></h3>

My JS:

$(document).ready(function () {
    $('<input name="name" type="text"/>').appendTo("div.namer");
});

EDIT

I have since learned JS Angular and it sorted this out for me in seconds :)

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p> 

</div>

Upvotes: 0

Views: 158

Answers (1)

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this..

      <input type="text" class="form-control dexter" placeholder="Dexter" name="name" style="background-color:#DFECF5;" required data-validation-required-message="Please enter your pet's name."/>

        <h3>What Breed is <div class="namer"></div></h3>
         <script>
    $(document).ready(function(){
        $(".dexter").blur(function(){
var dextervalue=$(".dexter").val();
$(".breed").remove();
$('<input name="name" class="breed" type="text" value"'+dextervalue+'"/>').appendTo("div.namer");
$(".breed").val(dextervalue);
        });

    });
    </script>

Fiddle:http://jsfiddle.net/cq3moa34/

Upvotes: 1

Related Questions