Member Avatar for localp

There is textbox, and 2 buttons in a web page. when the user clicks one of the button, the character 'A', should get printed on the textbox. and when the user clicks on the other button, 'B', should get printed on the textbox in the format 'AB'.

I was looking to do this in HTML, but i don't think i can use only HTML to achieve this. is this correct? Some says Javascript could do this, if so could someone help me with a sample code to begin with or a website that explains this. I did google this, but was unable to find a solution.

Thank you in advance

  • 2 Contributors
  • 4 Replies
  • 345 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by localp

Dani AI

Generated

Good quick thread — ’s follow‑up (appending the new character to the textbox text) is the minimal, correct idea. Below is a slightly more maintainable pattern and a few practical notes that often help when this kind of snippet is moved out of a toy page and into real markup.

A cleaner pattern is to keep markup free of inline JavaScript and use a single event handler. Give each button a data-char attribute and attach one listener to the container; the handler reads the attribute and concatenates that character onto the input’s current value. This scales if more buttons are added and avoids repeating similar handlers.

<form id="chars">
  <input id="display" />
  <button type="button" data-char="A">A</button>
  <button type="button" data-char="B">B</button>
</form>

<script>
document.getElementById('chars').addEventListener('click', function(e) {
  const ch = e.target && e.target.dataset && e.target.dataset.char;
  if (!ch) return;
  const out = document.getElementById('display');
  out.value = (out.value || '') + ch;
});
</script>

Troubleshooting notes and edge cases: ensure the script runs after the DOM (or use DOMContentLoaded), set type="button" on buttons inside forms (otherwise a click may submit the form), check for readonly or disabled on the input, and respect maxLength. For inserting at the caret rather than always appending, use selectionStart/selectionEnd to splice the character into the existing string. For keyboard users and accessibility prefer <button> (focusable by default) and add aria-label if the visible text is ambiguous.

Finally, inline handlers are fine for quick tests (as in the thread), but for maintainability and accessibility the unobtrusive approach above is recommended.

Recommended Answers

All 4 Replies

Member Avatar for codewall

this may be help.

<html>
<body>
<input type="text" name="f1" id="f1">
<input type="button" value="First Button" onClick="javascript:document.getElementById('f1').value='A';">
<input type="button" value="Second Button" onClick="javascript:document.getElementById('f1').value='AB';">
</body>
</html>

SNIP

Edited by happygeek because: fake sig snipped
Member Avatar for localp

this may be help.

<html>
<body>
<input type="text" name="f1" id="f1">
<input type="button" value="First Button" onClick="javascript:document.getElementById('f1').value='A';">
<input type="button" value="Second Button" onClick="javascript:document.getElementById('f1').value='AB';">
</body>
</html>

http://codewall.blogspot.com

thanks for the quick reply, but how do you append 'B' to 'A'. I mean If there are 2 buttons Button A and Button B. When we click button A , the character 'A' should be displayed on the textbox, and when we press button B, the character 'A' (which came from button A), followed by character 'B' (which came from button B) should appear like 'AB'.

in other words B should append to A, and the output should be 'AB'. how do i solve this.

Member Avatar for codewall

try this..

<html>
<body>
<input type="text" name="f1" id="f1">
<input type="button" value="First Button" onClick="javascript:document.getElementById('f1').value+='A';">
<input type="button" value="Second Button" onClick="javascript:document.getElementById('f1').value+='B';">
</body>
</html>

SNIP

Edited by happygeek because: fake sig snipped
Member Avatar for localp

try this..

<html>
<body>
<input type="text" name="f1" id="f1">
<input type="button" value="First Button" onClick="javascript:document.getElementById('f1').value+='A';">
<input type="button" value="Second Button" onClick="javascript:document.getElementById('f1').value+='B';">
</body>
</html>

http://codewall.blogspot.com

Oh yeah.. it worked. '+' sign means append i guess. Thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.