Заполнение 2х пунктов одновременно (form)

283
12 августа 2017, 05:04

Есть 2 формы на одной странице , есть много повторяющихся пунктов , можно как то на JS сделать , что бы одинаковые заполнялись одновременно или что-бы вторая заполнялась сама , после заполнения первой ?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="forma_odin"> 
<form id="odin"> 
<div class="form-group"> 
<h2>Форма 1</h2> 
    <label >Имя</label> 
    <input class="form-control" id="punkt_odin"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
</form> 
</div> 
 
 
<div class="forma_dva"> 
<form id="dva"> 
<div class="form-group"> 
<h2>Форма 2</h2> 
    <label >Имя</label> 
    <input class="form-control" id="punkt_dva"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
</form> 
</div>

Answer 1

//Обработчик на всю страницу, при отпускании кливиши на клавиатуре 
document.onkeyup = function(e){ 
  //Тут манипулируем, указываем что если элемент не инпут с автозаполеннием то не делаем ничего 
  if(e.target.id != 'punkt_odin_avtozapolnenie') return; 
  else punkt_dva_avtozapolnenie.value = punkt_odin_avtozapolnenie.value; 
  //Если проходит проверку делаем автозаполенния для инпута которий к нему привзящан. Value - то что на данный момент напечатанно в инпуте 
} 
  //Теперь нам нужен обработчик на изменение значения 
document.onchange = function(e){ 
  if(e.target.id != 'select_odin_avtozapolnenie') return; 
  //Так элементы js разрешает брать только если они указанны через id, если будет к примеру класс надо уже искать элемент по дереву 
  else select_dva_avtozapolnenie.value = select_odin_avtozapolnenie.value; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="forma_odin"> 
<form id="odin"> 
<div class="form-group"> 
<h2>Форма 1</h2> 
    <label >Пункт 1</label> 
    <input class="form-control" id="punkt_odin_avtozapolnenie"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
<select id="select_odin_avtozapolnenie"> 
  <option>...</option> 
  <option>Test1</option> 
  <option>Test2</option> 
  <option>Test3</option> 
</select> 
</form> 
</div> 
 
 
<div class="forma_dva"> 
<form id="dva"> 
<div class="form-group"> 
<h2>Форма 2</h2> 
    <label >Пункт 2</label> 
    <input class="form-control" id="punkt_dva_avtozapolnenie"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
<input id="select_dva_avtozapolnenie" type="text"> 
</form> 
</div>

Answer 2

//Событие при вводе 
document.getElementById('punkt_odin').oninput = function(){ 
//Присваиваем значение для п2 
  document.getElementById('punkt_dva').value = document.getElementById('punkt_odin').value; 
} 
document.getElementById('punkt_dva').oninput = function(){ 
  document.getElementById('punkt_odin').value = document.getElementById('punkt_dva').value; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="forma_odin"> 
<form id="odin"> 
<div class="form-group"> 
<h2>Форма 1</h2> 
    <label >Имя</label> 
    <input class="form-control" id="punkt_odin"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
</form> 
</div> 
 
 
<div class="forma_dva"> 
<form id="dva"> 
<div class="form-group"> 
<h2>Форма 2</h2> 
    <label >Имя</label> 
    <input class="form-control" id="punkt_dva"> 
  </div> 
<button type="button" class="btn btn-success">Success</button> 
</form> 
</div>

READ ALSO
Ошибка TypeError: The super constructor to `inherits` must have a prototype

Ошибка TypeError: The super constructor to `inherits` must have a prototype

Доброго времени сутокУже долгое время я пытаюсь запустить скрипт, перепробовал много разных способов, но всё напрасно

377
Можно ли так объявлять методы объектов в js? [требует правки]

Можно ли так объявлять методы объектов в js? [требует правки]

Вопрос вот в чемЕсть массив объектов, в одном из объектов есть метод coords(x,y)

304
Отметить Checkbox при условии (чистый js)

Отметить Checkbox при условии (чистый js)

Как с помощью чистого JS отметить checkbox с id="dva" , если отмечен checkbox с id="odin" ?

264