Filling input from a button

Question

Google, but did not find a suitable answer. How to fill in the input or textarea from the button. Suppose there are buttons with numbers 1,2,3 and so on. When you click on the corresponding button with a number in the input field or a text field, the desired number appears. For example, when you click on the button with number 1, 1 appears, when you click on the button with number 2, 2 appears ... and so on. And when you click on another button or link, this value did not disappear. The fact is that the input field is filled from different sources. If you briefly explain the above button adds the number of the tooth, and there are also links with diagnoses should be something like this: Chosen tooth number 1, diagnosis of caries, etc ... Here, the word tooth selected number 1 is filled from the button that indicated above, and The diagnosis of caries is filled out of the links that I prepared in advance. For reference, the code is:

 <li><a href="javascript:void(0)" onClick="document.getElementById('jaloby').value = 'Кариес' ;">1</a></li>

And + How to make it so that it works through the button?

<button type="button" onclick="document.getElementById('jaloby').value = '1' ;">1</button>
Since he didn’t guess himself and was tormented for a long time in a stupor, you helped me in a flash.

Igor Igor 78.1k five 20 49 · Accepted Answer · 2017-06-24T05:54:15

 function addTextToInput(anElement) { var text = document.getElementById('jaloby').value; if (text != "") text += ","; text += anElement.innerText; document.getElementById('jaloby').value = text; }

 <input id="jaloby" /> <br/> <button type="button" onclick="addTextToInput(this)">1</button> <button type="button" onclick="addTextToInput(this)">2</button> <button type="button" onclick="addTextToInput(this)">3</button>

What you need! Many thanks to you Igor. You helped me a lot - Alex Stassov

Vasiliy Alania Vasiliy Alania 535 four 7 · Answer 2 · 2017-06-26T10:16:37

 ;(function(){ 'use strict'; var insertAfter = function (elem, refElem) { var parent = refElem.parentNode; var next = refElem.nextSibling; if (next) { return parent.insertBefore(elem, next); } else { return parent.appendChild(elem); } }; var repeats = document.querySelectorAll('[data-repeat]'); var inputs = document.querySelectorAll('[data-id]'); repeats.forEach(function(wanted){ var itemList = wanted.dataset.repeat.split(','); itemList.forEach(function(value) { var cloneElem = wanted.cloneNode(); cloneElem.addEventListener('click', function(){ inputs.forEach(function(input){ if (input.dataset.id === wanted.dataset.action) { input.value += input.value ? ', ' + value : value; } }); }); cloneElem.innerText = value; insertAfter(cloneElem, wanted); }); wanted.remove(); }); })();

 .col-4 { width: 33.3333333%; float: left; }

 <div> <label>Жалоба:</label> <input type="text" data-id="report" /> </div> <br /> <div> <label>Объект:</label> <input type="text" data-id="object" /> </div> <br /> <div> <label>Диагноз:</label> <input type="text" data-id="diagnose" /> </div> <br /> <div class="col-4"> <h6>Жалобы</h6> <button data-action="report" data-repeat="1, 2, 3, 4, 5, 6"></button> </div> <div class="col-4"> <h6>Объекты</h6> <button data-action="object" data-repeat="object1, object2, object3"></button> </div> <div class="col-4"> <h6>Диагнозы</h6> <button data-action="diagnose" data-repeat="diagnos1, diagnos2, diagnos3, diagnos3"></button> </div>

Vasiliy Alania, thank you for your answer and for your efforts!
I just need to button with numbers filled in all three fields.
For example, when you press the button with the number 1 and the diagnosis field, and the field objective and the complaint field took the value 1. That's all.

Answer 3 · 2017-06-24T05:55:01

 <li> <a href="#" onClick="document.getElementById('jaloby').value = 'Кариес'">1</a> </li> <input id="jaloby"/>

 <li> <a href="" onClick="document.getElementById('jaloby').value = 'Кариес'; return false">1</a> </li> <input id="jaloby"/>

 <li> <a href="javascript:void(document.getElementById('jaloby').value = 'Кариес')">1</a> </li> <input id="jaloby"/>

 <li> <a href="javascript:(function(){document.getElementById('jaloby').value = 'Кариес'})()">1</a> </li> <input id="jaloby" />

Alex78191 Your answer just still solves my one more question)) Thank you!
And for the answer must be removed, as he does not answer the question.

Answer 4 · 2017-06-24T08:19:48

 ;(function ($window) { 'use strict'; var textTemplate = 'Выбран зуб №$1, диагноз $2;\n'; var insertAfter = function (elem, refElem) { var parent = refElem.parentNode; var next = refElem.nextSibling; if (next) { return parent.insertBefore(elem, next); } else { return parent.appendChild(elem); } }; var brand = $window.brand = { init: function (parentElement, toothCount, diagnoseList) { var self = this; var container = $window.document.createElement('div'); container.classList.add('container'); var input = $window.document.createElement('textarea'); input.classList.add('input'); container.appendChild(input); insertAfter(container, parentElement); for (var i = 1; i <= toothCount; i++) { var button = $window.document.createElement('button'); button.setAttribute('data-number', i); button.classList.add('btn-number'); button.innerText = i; button.addEventListener('click', function () { self.textTemplate = textTemplate.replace('$1', this.dataset.number); }); container.appendChild(button); } for (var i = 0; i < diagnoseList.length; i++) { var button = $window.document.createElement('button'); button.setAttribute('data-diagnose', diagnoseList[i]); button.classList.add('btn-diagnose'); button.innerText = diagnoseList[i]; button.addEventListener('click', function () { if (self.textTemplate) { input.value += self.textTemplate.replace('$2', this.dataset.diagnose); self.textTemplate = ''; } }); container.appendChild(button); } }, textTemplate: '', defaultDiagnoseList: ['Альвеолы', 'Галитоз', 'Кариес'] } })(window); brand.init(window.document.body, 32, brand.defaultDiagnoseList);

 .container { margin: 20px auto; width: 450px; } .container .input { width: 100%; resize: vertical; min-height: 100px; border-radius: 4px; } .container .btn-number { background-color: #fff; color: #929292; border: 1px solid #aaa; border-radius: 4px; padding: 4px; margin: 2px; outline: none; } .container .btn-diagnose { background-color: #fdd; color: #555; border: 1px solid #aaa; border-radius: 4px; padding: 4px; margin: 2px; outline: none; }

But my task is a little different (((((Above, Igor wrote code that I just need, he fills in only one input, an input with a jaloby ID, it turns out that I understood later so that other input would be filled without erasing the value ( (how to make it so that it simultaneously fills 3 inpuet entuits with aydishnik obekt and diagnoz without erasing the meaning that is there? can you help me?
Of course you can (I am also a beginner and everything started with something), you can answer that and everything) if you know the answer) would be happy)

Filling input from a button

4 answers 4

More articles: