Question

154

append value to an input field in JQuery

rated 0 times [ 161] [ 7] / answers: 1 / hits: 66603 / 10 Years ago, sat, august 2, 2014, 12:00:00

I have an input type=tel with id=#enter and I want to add append values from button clicks. I have done this:

$(#one).click(function () {

    $(#myInput).val(1);

});

$(#two).click(function () {

    $(#myInput).val(2);

});

So every time a button is pressed from #id 1-9 it enters the corresponding numeric value.

However this doesn't append the value in the input field type just replaces the existing value with the value of the button clicked. How can it append the values?

This is the JSFiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bretd

Add To Favorites

Follow

Total Points: 6

Total Questions: 100

Total Answers: 97

Location: England

Member since Sun, May 21, 2023

1 Year ago

answered 10 Years ago haleeg · Accepted Answer

You can use something like this to append values:

$(#myInput).val(function() {

    return this.value + '1';

});

You can also improve your approach by giving each number button a class and register the same event listener for all buttons. For example:

$(.dial).click(function () {

    var number = $(this).data('number');

    $(#myInput).val(function() {

        return this.value + number;

    });

});

Where the button would be defined as

<button type=button class=btn btn-primary btn-xs1 dial data-number=4> <b>GHI<br>4

as so on.

append value to an input field in JQuery

Answers

Demo: http://jsfiddle.net/8R9xL/2/

bretd