CODEWITHSUNDEEP
javascriptjqueryhtml
johnny555
johnny555

Reputation: 183

Multiple Inputs that Populate Separate Divs

With JQuery, this allows for a single input that populates a separate div:

var div = $('div')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>Enter text here: <br><input></form>
<div></div>

But then when I try to add a second input that populates another separate div I cannot get it to work. I also don't know how to give the div an ID and assign that ID in the javascript. Here's what I've tried:

var div = $('#header')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});

var div = $('#subHeader')[0];

$('input').bind('keyup change', function() {
  div.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>Enter text here: <br><input></form>
<div id="header"></div>
<br><br>
<form>Enter text here: <br><input></form>
<div id="subHheader"></div>

How can I create multiple inputs that each populate their own seperate div that has an ID?

Upvotes: 2

Views: 199

Answers (3)

Jason Spradlin
Jason Spradlin

Reputation: 1427

$('input') is a jQuery call that returns an array of all tags on the page. You should be using classes or IDs to differentiate each div and each input.

ALSO, you have a typo in your subHeader ID (it says subHheader).

<form>Enter text here: <br><input id="headerInput"></form>
<div id="header"></div>
<br><br>
<form>Enter text here: <br><input id="subHeaderInput"></form>
<div id="subHeader"></div>

var $divA = $('#header'); 

$('#headerInput').bind('keyup change', function() {
    $divA.html(this.value);
});

var $divB = $('#subHeader');

$('#subHeaderInput').bind('keyup change', function() {
    $divB.html(this.value);
});

Upvotes: 3

Murtaza Fakhruddin
Murtaza Fakhruddin

Reputation: 102

You can try this by assigning id to your inputs as well,

<html>

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var div1 = $('#header')[0];

            $('#text1').bind('keyup change', function() {
                div1.innerHTML = this.value;
            }); 

            var div2 = $('#subHeader')[0];

            $('#text2').bind('keyup change', function() {
                div2.innerHTML = this.value;
            });        
         })      
    </script>
</head>    
<body>
        <form>Enter text here: <br><input id="text1">
        <div id="header"></div>
        <br><br>
        Enter text here: <br><input id="text2">
        <div id="subHeader"></div>
        </form>
</body>

</html>

Upvotes: 0

Octave W
Octave W

Reputation: 98

You can specify your <input> with a id(maybe the same one), so you can use jQuery to actually query that

<form>Enter text here: <br><input id="subHheaderInput"></form>
<div id="subHheader"></div>



var div = $('#subHeader')[0];

$('#subHeaderInput').bind('keyup change', function() {
div.innerHTML = this.value;
});

Upvotes: 2

Related Questions