1

Гуглил ,но не нашел подходящего ответа. Как заполнить inputили textarea из кнопки. Допустим есть кнопки с цифрами 1,2,3 и т д. При нажатии на соответствующую кнопку с цифрой в поле инпута или текстового поля появлялся нужная цифра. Например при нажатии на кнопку с номером 1 появлялся 1 при нажатии на кнопку с номером 2 появлялся 2 ...и т д. И при нажатии на другую кнопку или ссылку это значение не исчезало. Дело в том что поле инпут заполняется из разных источников. Если коротко обьяснить то вышеуказанная кнопка добавляет номер зуба, а есть ещё и ссылки с диагнозами должно получится примерно так : Выбран зуб №1, диагноз кариес и т д... Здесь слово выбран зуб №1 заполняется из кнопки то что указал выше, а диагноз кариес заполняется из ссылки которые я зараее подготовил. Для ссылки код такой :

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

И + Как его сделать чтоб он и через кнопку работал ?

8
  • 1
    <button type="button" onclick="document.getElementById('jaloby').value = '1' ;">1</button>
    – user176262
    24 июн 2017 в 5:12
  • Спасибо огромное Igor. От души благодарен Вам. 24 июн 2017 в 5:17
  • 1
    Вы шутите? Я всего лишь заменил таг а на button.
    – user176262
    24 июн 2017 в 5:19
  • Так как сам не догадался и в ступоре мучался долго, Вы в один миг помогли мне. Без каких либо шуток 24 июн 2017 в 5:29
  • Рад, что смог помочь. Успехов!
    – user176262
    24 июн 2017 в 5:30

4 ответа 4

2

;(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>

3
  • Vasiliy Alania, спасибо за Ваш ответ и за Ваши старания ! Высоко ценю Ваш труд. Низкий Вам поклон. Но я просил совсем о другом. Мне лишь надо Чтоб кнопки с цифрами заполняли все три поля. Например при нажатии на кнопку с номером 1 и поле диагноз, и поле обьективные и поле жалобы принимали значение 1. И всё. Давайте тогда я открою новый вопрос. Если сможете и если Вам не составит труда помогите мне. 26 июн 2017 в 10:44
  • Видимо, опять все по другому понял :)))) 26 июн 2017 в 11:14
  • Хорошо, я просто работаю, и читаю быстро все вопросы... 26 июн 2017 в 11:16
1

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>

2
1

<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" />

3
  • Вам так же спасибо. Alex78191 Ваш ответ как раз таки решает мой ещё один вопрос )) Благодарю ! 24 июн 2017 в 5:58
  • @AlexStassov поставьте тогда плюс.
    – Alex78191
    24 июн 2017 в 5:59
  • @AlexStassov какой еще один вопрос? А за ответ надо удалить, так как он не отвечает на вопрос.
    – Alex78191
    24 июн 2017 в 6:03
1

;(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;
}

3
  • Vasiliy Alania, Вообще супер !) Спасибо за отклик. Но у меня задача немного по другому ((((( Выше Игорь написал код который как раз нужен мне, он заполняет только один инпут т е инпут с айдишником jaloby оказывается что я понял попозже чтоб заполнялись и другие инпуты и при этом не стирая значение (( как сделать так чтоб он одновременно заполнял 3 инпута т е инпуты c айдишниками obekt и diagnoz при этом не стирая значение которые там есть ? вы сможете мне помочь ? 24 июн 2017 в 12:27
  • Смогу, тут и ответить? Я просто новичок на сайте... 24 июн 2017 в 22:00
  • Конечно сможете ( я тоже новичок и все с чего то начинали) прорсто ответте и всё ) если знаете ответ ) был бы рад ) 25 июн 2017 в 8:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.