Jquery keyup multiple inputs

Question

I am trying to make it so when someone uses the input the text that corresponds to it will show.

<div class="content1" style="display: block;">Content 1</div>
<div class="content2" style="display: none;">Content 2</div>
<div class="content3" style="display: none;">Content 3</div>
<div class="content4" style="display: none;">Content 4</div>

<ul class="addReview">
        <li><p>Input 1</p><input type="text" name="input1" value="" id="input1" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 2</p><input type="text" name="input2" value="" id="input2" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 3</p><input type="text" name="input3" value="" id="input3" autocomplete="off" maxlength="2"  /></li>
        <li><p>Input 4</p><input type="text" name="input4" value="" id="input4" autocomplete="off" maxlength="2"  /></li>
    </ul>

Would I do a keyup function for each input or is there a way to make one keyup function?

nnnnnn · Accepted Answer · 2012-03-18 05:30:08Z

This should do it for your current markup:

$('.addReview input[type="text"]').keyup(function() {
   $('div[class^="content"]').hide();
   $('div.' + this.id.replace(/input/, "content")).show();
});

Demo: http://jsfiddle.net/WD3CU/

But it would be neater if you gave the divs a common class and different ids. E.g., if all the divs had a class "content" and an id in the form "content1" then you could do this:

$('.addReview input[type="text"]').keyup(function() {
   $('div.content').hide();
   $('#' + this.id.replace(/input/, "content")).show();
});

Which looks similar but is much more robust (the way I did it for your current html will likely break if you were to give the divs additional classes).

Demo incorporating my suggested markup changes: http://jsfiddle.net/WD3CU/1/

Also, in my opinion it would make more sense to use the .focus() event rather than .keyup(), so that the appropriate div is shown as soon as the user clicks or tabs into one of the inputs.

Community · Accepted Answer · 2017-05-23 11:45:55Z

1

You have to bind to a common selector like this

$('.addReview input:text').keyup(function() { });

demo

Or a class selector like this

$('.addReview .mytextboxclass').keyup(function() { });

demo

Or an attribute selector like in nnnnnn's answer

$('.addReview input[type="text"]').keyup(function() { });

demo

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 18, 2012 at 5:28

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Comments

Elliot Bonneville · Accepted Answer · 2012-03-18 05:07:29Z

0

You'd have to modify your HTML architecture a bit. Change it to this:

<div class="content" id="content_1" style="display: none;">Content 1</div>
<div class="content" id="content_2" style="display: none;">Content 2</div>
<div class="content" id="content_3" style="display: none;">Content 3</div>
<div class="content" id="content_4" style="display: none;">Content 4</div>

<ul class="addReview">
    <li><p>Input 1</p><input type="text" class="input" name="input_1" value="" id="input_1" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 2</p><input type="text" class="input" name="input_2" value="" id="input_2" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 3</p><input type="text" class="input" name="input_3" value="" id="input_3" autocomplete="off" maxlength="2"  /></li>
    <li><p>Input 4</p><input type="text" class="input" name="input_4" value="" id="input_4" autocomplete="off" maxlength="2"  /></li>
</ul>

You can then use the following jQuery code to achieve what you're trying to do:

$(".input").keyup(function() {
    var curId = this.id.split("_")[1];
    $("#content_"+curId).html($(this).val());
    $("#content_"+curId).show();
});

Working JSFiddle demo.

answered Mar 18, 2012 at 5:07

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

1 Comment

Claremont Over a year ago

Thanks for your help mate but thats not really what I was going for. The inputs value is unrelated to what I am trying to do. I want when someone clicks on the input to show a pre selected message to help them to answer the question. Kinda like when you ask a question on stackoverflow, how the right side gives you hints on your title and then body and then tags. Thanks for the help!

Collectives™ on Stack Overflow

Jquery keyup multiple inputs

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related