Button click text insertion

Question

Here is a jsfiddle example of the problem I've been working on:

HTML:

<input type="text">
<input type="text">
<input type="text">
<div>
<button class="buttons">c</button>
<button class="buttons">a</button>
<button class="buttons">t</button>
</div>

JS:

$(document).ready(function () {

    $('input').click(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').append(cntrl);
    });
});

I'm unable to get the button click to insert the clicked character into the textbox in the jsfiddle example. Any idea how to fix this?

If you replace append with val, this works for me. By works, i mean clicking a text box and then clicking a button inserts the buttons value into the text box. — Jamie Dixon
– Jamie Dixon, Commented Sep 6, 2014 at 22:31

ben_makes_stuff · Accepted Answer · 2014-09-06 22:32:44Z

1

Use a combination of val() calls instead of append like so: $('input').val($('input').val()+cntrl). See here: http://jsfiddle.net/7fjgvuhh/

answered Sep 6, 2014 at 22:32

ben_makes_stuff

5084 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Thomas Over a year ago

You don't need to call the same method twice, once inside the other, just use the anonymous function: $(input).val(function(i,v) { return v + cntrl; });

ben_makes_stuff Over a year ago

That's interesting, I've never seen that used before - thanks!

David Thomas Over a year ago

A (somewhat-belated) illustration.

Weafs.py · Accepted Answer · 2014-09-06 22:36:48Z

Since you just want to show which button was pressed, you could give your buttons a value attribute (value="c", value="a" and value="t") in the HTML and use it in the JavaScript code to add it to the textbox.

Demo on Fiddle.

HTML:

<input id="one" type="text">
<input id="two" type="text">
<input id="three" type="text">
<div>
    <button id="c" class="buttons" value="c">c</button>
    <button id="a" class="buttons" value="a">a</button>
    <button id="t" class="buttons" value="t">t</button>
</div>

JavaScript:

$(document).ready(function () {
    $('#c').click(function () {
        $('#one').val($(this).val());
    })

    $('#a').click(function () {
        $('#two').val($(this).val());
    })

    $('#t').click(function () {
        $('#three').val($(this).val());
    })
});

Jay S. · Accepted Answer · 2014-09-06 22:41:15Z

0

To get the text of the button you should use the $.text() function

Here is the correct code

HTML

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<div> 
<button class="buttons">c</button>
<button class="buttons">a</button>
<button class="buttons">t</button>
</div>

JS

$(document).ready(function () {

    $('input').click(function(){
       $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
       var cntrl = $(this).text();
       var existing  = $('input.active').val();
       $('input.active').val(existing + cntrl);
    });
});

Here's a fiddle : http://jsfiddle.net/rua4cn8o/1/

edited Sep 6, 2014 at 22:41

answered Sep 6, 2014 at 22:33

Jay S.

1,32712 silver badges31 bronze badges

4 Comments

ben_makes_stuff Over a year ago

This doesn't really do what's expected - he wants to append items to each input, but your code does a replace. Also, this doesn't work because the JQuery selector you're using won't match the inputs he provided

Jay S. Over a year ago

Thanks @Ben, I've updated my code. And i think he is trying to allow all the inputs to have multiple characters. That's why I think he's assigning class "active" to the most recently clicked input, and then appending the character to it.

David Thomas Over a year ago

And <input> elements are void/empty elements; in HTML they don't need to be closed (<input>) and in XHTML they're self-closing (<input />). Also what's $.text(), did you just mean the text() method? There is no jQuery.text() method.

Jay S. Over a year ago

@DavidThomas Thank you, I didn't know that. I will update my code accordingly.

Collectives™ on Stack Overflow

Button click text insertion

3 Answers 3

3 Comments

Demo on Fiddle.

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Demo on Fiddle.

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related