在Jquery的帮助下，在多个输入字段上复制输入字段上的文本

Question

嗨，好像，你们都会得到我所面对的问题。我将与您分享我的Html代码。请帮助我用jsfiddle :)。所有帮助将受到高度赞赏。提前谢谢大家

HTML：

Codec1 := TCodec.Create(nil);
Codec1.CryptoLibrary := TCryptographicLibrary.Create(Codec1);
Codec1.StreamCipherId := uTPLb_Constants.BlockCipher_ProgId;
Codec1.cipher := 'native.AES-256';
Codec1.ChainMode := uTPLb_Constants.CBC_ProgId;
Codec1.Password := Password;
tmp := LBEdit1.Text;  // fetch the plaintext from form
if tmp <> '' then
begin
    Try
        Codec1.Reset;
        Codec1.EncryptString(tmp, ciphertext, TEncoding.UTF8);
        Edit1.Text := string(ciphertext);  // display the ciphertext
    Finally
        Codec1.Free;
    End;
end;

使用Javascript：

<div class="form-group">
    <div class="row">
        <div class="col-md-6">
            <label>Where are you starting from</label>
            <input type="text" name="start[]" class="form-control" placeholder="ex: Banglore">
        </div>
        <div class="col-md-6">
            <label>Where do you want to go</label>
            <input type="text" name="destination[]" class="form-control dest" placeholder="ex: Some Other Places">
        </div>
    </div>
</div>

<div class="form-group multiple-form-group">
    <div class="form-group input-group">
        <div class="col-md-6 pad-left-0">
            <input type="text" name="start[]" class="form-control start" placeholder="ex: Intermediate place"/>
        </div>
        <div class="col-md-6 pad-right-0">
            <input type="text" name="destination[]" class="form-control dest" placeholder="ex: Intermediate place"/>
        </div>
        <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+
        </button></span>
    </div>
</div>

Answer 1

您需要使用事件委派将处理程序绑定到动态创建的元素。您需要使用DOM导航功能来查找与用户填写的.start相关的.dest字段。

＆＃13;

＆＃13;

$(function() {
    $(document).on("change", ".dest", function() {
        $(this).closest(".form-group").next().find(".start").val(this.value);
    });
});

(function($) {
  $(function() {

    var addFormGroup = function(event) {
      event.preventDefault();

      var $formGroup = $(this).closest('.form-group');
      var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
      var $formGroupClone = $formGroup.clone();

      $(this)
        .toggleClass('btn-default btn-add btn-danger btn-remove')
        .html('–');

      $formGroupClone.find('input').val('');
      $formGroupClone.insertAfter($formGroup);

      $formGroupClone.attr('id', 'test' + (parseInt(/test(\d+)/.exec($(this).attr('id'))[1], 10) + 1)).appendTo('#main')

      var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
      if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
        $lastFormGroupLast.find('.btn-add').attr('disabled', true);
      }
    };

    var removeFormGroup = function(event) {
      event.preventDefault();

      var $formGroup = $(this).closest('.form-group');
      var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

      var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
      if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
        $lastFormGroupLast.find('.btn-add').attr('disabled', false);
      }

      $formGroup.remove();
    };

    var countFormGroup = function($form) {
      return $form.find('.form-group').length;
    };

    $(document).on('click', '.btn-add', addFormGroup);
    $(document).on('click', '.btn-remove', removeFormGroup);

  });
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="row">
    <div class="col-md-6">
      <label>Where are you starting from</label>
      <input type="text" name="start[]" class="form-control" placeholder="ex: Banglore">
    </div>
    <div class="col-md-6">
      <label>Where do you want to go</label>
      <input type="text" name="destination[]" class="form-control dest" placeholder="ex: Some Other Places">
    </div>
  </div>
</div>

<div class="form-group multiple-form-group">
  <div class="form-group input-group">
    <div class="col-md-6 pad-left-0">
      <input type="text" name="start[]" class="form-control start" placeholder="ex: Intermediate place" />
    </div>
    <div class="col-md-6 pad-right-0">
      <input type="text" name="destination[]" class="form-control dest" placeholder="ex: Intermediate place" />
    </div>
    <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+
        </button></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;