65346

Populate text box in Javascript by clicking on button [closed]

Question:

I am trying to populate a text box on a form by clicking on form buttons. Below is code I have so far - modified this code from a select box example -

<!DOCTYPE html> <html> <head> <script> function moveNumbers(){ var no=document.getElementById("no"); var txt=document.getElementById("result").value; txt=txt + option; document.getElementById("result").value=txt; } </script> </head> <body> <form> Select numbers:<br> <input type="button" value="1" name="no" onclick="moveNumbers()"> <input type="button" value="2" name="no" onclick="moveNumbers()"> <input type="button" value="3" name="no" onclick="moveNumbers()"> <input type="text" id="result" size="20"> </form> </body> </html>

Answer1:

There are a few flaws here. It doesn't seem like option is defined. And you have no way to retrieve the button that was actually clicked.

What you can do is pass this.value to your onclick event handler. This passes the value of the button you push, and use that to append to your textbox value.

<script> function moveNumbers(num) { var txt=document.getElementById("result").value; txt=txt + num; document.getElementById("result").value=txt; } </script> 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">

<a href="http://jsfiddle.net/cMN44/" rel="nofollow">http://jsfiddle.net/cMN44/</a>

Answer2:

Assuming you want the value of the button to be inserted into the text box:

<!DOCTYPE html> <html> <head> <script> function moveNumbers(number){ document.getElementById("result").value=number; } </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>

Recommend

  • $_POST for text in DIV elements
  • Need a consistent TimePicker gizmo for mobile web site
  • Divide a $1 by 3 and adjusting 1 cent
  • Making Google Visualization - Annotation Chart to work in GWT
  • Validate jQuery plugin, field not required
  • In-place sed command not working
  • Update Google Maps traffic layer without page reloading
  • Tell Git to stop prompting me for conflicts when none really exist?
  • saving file generated by TCPDF
  • Chart.js Multiple dataset
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Play WS (2.2.1): post/put large request
  • Jquery UI tool tip close icon
  • DomPDF {PAGE_NUM} not on first page
  • Display issues when we change from one jquery mobile page to another in firefox
  • Splitting given String into two variables - php
  • NetLogo BehaviorSpace - Measure runs using reporters
  • Javascript simulate pressing enter in input box
  • Is my CUDA kernel really runs on device or is being mistekenly executed by host in emulation?
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Build own AppleScript numerical error handling
  • ORA-29908: missing primary invocation for ancillary operator
  • How to get next/previous record number?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • How to Embed XSL into XML
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?