How can I add value to textbox, instead of setting value

Question

I'm trying to create a calculator, getting the values from buttons 1 to 9. Now I'd like to add a value to the textbox instead of setting it, like I want the user to be able to add 1 then 5 to make it a total of 15. How can I achieve this?

.prop sets a value, or .val so that one is out of the list.

<script>
jQuery(document).ready(function () {
    jQuery("#one").click(function () {
        jQuery("#entered").prop("value", "1");
    });

});
</script>

CSS part:

<div>
    <button id="one">1</button>
    <button id="two">2</button>
    <button id="three">3</button>
    <button id="four">4</button>
    <button id="five">5</button>
    <button id="six">6</button>
    <button id="seven">7</button>
    <button id="eight">8</button>
    <button id="nine">9</button>
    <input type="text" id="entered" disabled="disabled"  />
</div>

Marvin Fischer · Accepted Answer · 2015-07-10 10:50:44Z

3

Change

jQuery("#entered").prop("value", "1");

to

jQuery("#entered").val(jQuery("#entered").val() + "1");

This will concenate the old stuff with a new entered 1

This is the full code:

<div>
    <button id="one">1</button>
    <button id="two">2</button>
    <button id="three">3</button>
    <button id="four">4</button>
    <button id="five">5</button>
    <button id="six">6</button>
    <button id="seven">7</button>
    <button id="eight">8</button>
    <button id="nine">9</button>
    <input type="text" id="entered" disabled="disabled" value="" />
</div>

jQuery(document).ready(function () {
    jQuery("#one").click(function () {
        jQuery("#entered").val(jQuery("#entered").val() + "1");
    });

});

If you want to have a function for that:

 $.fn.appendVal = function (newPart) {
   return this.each(function(){ $(this).val( $(this).val() + newPart); });
 };

 $("#abc").appendVal("test");

https://jsfiddle.net/ffp19wze/ here is a working jsFiddle for it

edited Jul 10, 2015 at 10:50

answered Jul 10, 2015 at 10:30

Marvin Fischer

2,5823 gold badges25 silver badges34 bronze badges

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

4 Comments

Marvin Fischer Over a year ago

A second nice way is discribed here: stackoverflow.com/questions/1224133/…

Altay Mazlum Over a year ago

Oh but this one doesn't work properly because when there is not the first value, it returns undefined1...

Altay Mazlum Over a year ago

Okay thanks, although I've already solved the problem with the link that you've sent to me. Thanks anyways! And If you could edit the answer with codes, I'd like to select you as the best answer.

Altay Mazlum Over a year ago

I mean not just jsfiddle but this will do I guess, thanks for your answer. Have a good day!

Dhinju Divakaran · Accepted Answer · 2015-07-10 10:31:14Z

2

Change your jQuery to

jQuery(document).ready(function () {
    jQuery("#one").click(function () {
        var cur_val = jQuery("#entered").val();
        cur_val = cur_val+"1";
        jQuery("#entered").val(cur_val);
    });

});

answered Jul 10, 2015 at 10:31

Dhinju Divakaran

9031 gold badge8 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I add value to textbox, instead of setting value

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related