Как скопировать значение из одного входа в другой с помощью jquery, используя ссылку

Question

Я использую плагин огромных форм на сайте Wordpress.Я создал довольно большую и подробную форму - и я надеялся ускорить процесс заполнения формы пользователями моего веб-сайта, позволив пользователям копировать значение одного заполненного поля в другое поле (если данные из первого полято же самое для второго поля), вместо того, чтобы вводить второе, тот же самый ввод.

Формируемые формы обрабатывают каждое поле с уникальным идентификатором (в моем примере ниже, пользователь должен заполнить поле 104 и получитьвведенное значение добавлено к 105).

Я пытаюсь заставить пользователя щелкнуть ссылку после поля (104), чтобы при нажатии значение копировалось в поле рядом с ним (105).)

Так, например: FIELD 1 - «значение поля_1»> щелкните, чтобы скопировать> ПОЛЕ 2 - «значение поля_1»

Я написал следующий скрипт в jQuery и прикрепил егов HTML-код моей формы, но там не хватает ссылки, и я не могу заставить его работать ...

(Я прочитал все, что есть на эту тему, но я сейчас на стадии, Мне серьезно нужна помощь ....)

    <script>
jQuery(document).ready(function ($) {
    "use strict";
    // monitor field 1 for changes
    $('104').on('change', function() {
        var val1 = $(this).val();
        // assign the value to field 2
        $('105').val(val1);
    });
});
</script>

Answer 1

Я бы посмотрел изменения на keydown и решил бы скопировать значения полей, если введено не менее 3 или более символов, что-то вроде этого:

$('#field2').keydown(function(e) {
  var field1 = $('#field1').val();
  var similarFieldDetected = this.value.length >= 2 && field1.startsWith(this.value);

  $(this).next('a.copy').toggle(similarFieldDetected);
});

$('a.copy').click(function(e) {
  e.preventDefault();
  var field1 = $('#field1').val();

  $('#field2')
    .val(field1)
    .focus()
    .next('a.copy')
    .hide();
});

html, body {
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-10">
  <div class="form-group">
    <label for="field1">Address 1:</label>
    <input id="field1" class="form-control" placeholder="Enter your address" />
  </div>

  <div class="form-group">
    <label for="field2">Address 2:</label>
    <input id="field2" class="form-control" placeholder="Try typing out exactly the same value as Address 1" />
    <a class="copy form-text" href="#" style="display:none;">
      <small><i class="mdi mdi-content-copy"></i> Copy Address #1</small>
    </a>
  </div>
</div>