1

Есть 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>

2
  • На чистом JS нужно?
    – Cheg
    10 авг 2017 в 17:22
  • @Cheg было бы здорово , мне в нем проще будет разобраться и понять что к чему.
    – Xzizz
    10 авг 2017 в 17:26

2 ответа 2

4

//Событие при вводе
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>

3

//Обработчик на всю страницу, при отпускании кливиши на клавиатуре
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>

5
  • Здорово , а если у одной форму selected , а у другой input. Как передать value выбранного option в input ?
    – Xzizz
    10 авг 2017 в 17:45
  • 1
    @Vipz, дополнил ответ 10 авг 2017 в 17:53
  • сильно , спасибо
    – Xzizz
    10 авг 2017 в 18:45
  • зачем вешать на документ onkeyup? скорее всего от неграмотности 10 авг 2017 в 19:05
  • @Lieutenant Jim Dangle, а на что вешать? 10 авг 2017 в 19:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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