Javascript - click on buttons to populate text box

Question

This worked perfectly - found this example using a drop down box and modified - with some help of course!

<!DOCTYPE html>
<html>
<head>
<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>

</head>

<body>
<form>

Select numbers: <br> <input type="button" value="1" name="no"     onclick="moveNumbers(this.value)">  
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">  
<input type="text" id="result" size="20">

</form>
</body>
</html>

What if you wanted to fill the textbox with 333? "Click on checkbox 3, then uncheck it, then click again"? — raina77ow, Dec 19 '12 at 16:21
@raina77ow good question! user1916335 : show us what you have tried! — Harsha Venkataramu, Dec 19 '12 at 16:23
333 - I guess I would need 3 lists of checkboxes? What about buttons? Each time I click on the button it would add a value to the textbox? — GRicks, Dec 19 '12 at 16:25
What I have tried so far is to have 3 lists of checkboxes using PHP - and I click on each set to store the number before I submit the HTML form. Trying to get it down to one set of numbers - — GRicks, Dec 19 '12 at 16:28
@GRicks - Consider adding your existing code to the question to show us what you've already done. That would allow us to suggest modifications to get it to the state you're looking for. As it stands, there's not enough detail here for somebody to give you a solid answer. — Justin Niessner, Dec 19 '12 at 16:42
REVISED question is shown above now. raina77ow had a good point about having to check and uncheck. If I used BUTTONS instead - I would not have to go through that. The code I displayed above shows 5 of the 30 checkboxes I have on my form . Thanks. — GRicks, Dec 19 '12 at 16:58
So right now - I have THIRTY checkboxes that I check to create a 3 digit number - FIVE are shown above. I am now trying to get 10 BUTTONS to create a 3 digit number in a text box - so when I submit the HTML form - it will post the 3 digit number. — GRicks, Dec 19 '12 at 17:03
This is where I am at now - @jackflash has it working in JSFiddle - but I can't seem to get it working in my environment. Mootools is working fine - tested it before implementing code from jackflash - any help is appreciated! — GRicks, Dec 20 '12 at 17:17

Carlos · Answer 1 · 2012-12-20T20:40:20.767

HTML:

<input type="text" id="screen" />
<div id="keypad">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <br />
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <br />
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <br />
    <button>0</button>
</div>

JavaScript:

window.onload = function () {
    var screen  = document.getElementById('screen'),
        keypad  = document.getElementById('keypad'),
        buttons = keypad.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            screen.value = screen.value + this.innerHTML;
            return false;
        };
    }
};

Full example:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <form onsubmit="javascript: /* Just for testing */ alert('Sending...'); return false;">
        <input type="text" id="screen" />
        <div id="keypad">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <br />
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <br />
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <br />
            <button>0</button>
        </div>
    </form>
    <script>
        window.onload = function () {
            var screen  = document.getElementById('screen'),
                keypad  = document.getElementById('keypad'),
                buttons = keypad.getElementsByTagName('button');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    screen.value = screen.value + this.innerHTML;
                    // Try to comment line below to see what happens
                    return false;
                };
            }
        };
    </script>
</body>
</html>

Demo: JSFiddle

EXACTLY what I need - except for one thing! When I use the JSFiddle link - it works exactly the way I need it to work. But - when I put it in my form - it submits the form each time I click on the number. I tried putting the code BEFORE the form - and it does not work...any ideas? Thanks! — GRicks, Dec 19 '12 at 17:36
@GRicks Done! I've updated the JSFiddle. Just added a `return false;` statement into buttons' `onclick` event function. — Carlos, Dec 20 '12 at 15:06
'@jackflash still not working with my code. I posted what I am currently using in my PHP file - thanks. — GRicks, Dec 20 '12 at 16:33
@GRicks I posted a full example. Sorry but I can't do anything else for you. — Carlos, Dec 20 '12 at 20:41

score 0 · Answer 2 · answered Dec 19 '12 at 16:28

<input type="checkbox" id="checkBox1" onclick="app(1)">
<input type="checkbox" id="checkBox2" onclick="app(2)">
<input type="checkbox" id="checkBox2" onclick="app(3)">

<script language="javascript">
    function app(text)
    {
         var TheTextBox = document.getElementById("Mytextbox"); //Replace this with correct name
         TheTextBox.value = TheTextBox.value + text;
    }
</script>

score 0 · Answer 3 · answered Dec 19 '12 at 16:30

Working example: http://jsfiddle.net/KhwHY/1/

JQuery

$('input').click(function(){
    if(this.checked) {
        $('#Output').text($('#Output').text() + $(this).val());
    } else {
    }
});

HTML

<form>
    <input type="checkbox" value="1">1<br />
    <input type="checkbox" value="2">2<br /> 
    <input type="checkbox" value="3">3<br />
</form>

<div id="Output">

</div>

This should provide you with a good starting point.

score -1 · Answer 4 · answered Dec 19 '12 at 16:28

I did 90% of the work, you take it from here. http://jsfiddle.net/MeWhp/

    <!DOCTYPE html>
<html>
<head>
  <style>
input, label { line-height: 1.5em; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form>
  <div>
    <input type="checkbox" name="fruit" value="1" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="2" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="3" id="banana">
    <label for="banana">banana</label>
  </div>
  <textarea id="log">
   </textarea>
</form>

<script>

</script>
$("input").click(function() {
  $("#log").html( $(":checked").val() + " is checked!" );
});
</body>
</html>

Javascript - click on buttons to populate text box

4 Answers4

Linked