上輸入字段複製文本使用jQuery的一個以上的輸入幫助字段

Question

嗨看來，你都將得到我敢從我附上的圖片面臨的問題。我會與你分享我的Html代碼。請幫助我與jsfiddle :)。所有幫助將不勝感激。謝謝大家提前

HTML：

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

的Javascript：

<script> 

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

    $(function() {          // <== Doc Ready 
     $(".dest").change(function() {     // When the email is changed 
      $('.start').val(this.value);     // copy it over to the mail 
     }); 
    }); 
</script> 

Answer 1

您需要使用事件委託綁定到動態創建的元素的處理程序。而你需要使用DOM導航功能找到相關.dest的.start領域用戶填寫。

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

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