소스 코드 공유 효과가 있는 jQuery 복사 양식 요소 데모_jquery

양식을 제출할 때 주문 정보에 여러 제품 모델을 추가하거나 양식 데이터에 새 필드 정보를 추가하는 등 여러 개의 동일한 양식 요소를 반복적으로 추가해야 하는 경우가 있습니다. 이때, "항목 추가" 또는 "복사" 버튼을 양식에 직접 배치하고, 버튼을 클릭하여 양식 요소를 복사할 수 있습니다.

데모 보기 소스 코드 다운로드

HTML

이 글에서는 간단한 jQuery 기반 요소 복사 플러그인을 예제를 통해 소개합니다. 이 플러그인을 호출하면 요소 복사 기능을 쉽게 구현할 수 있습니다.

먼저 jQuery 라이브러리 파일과 요소 복제 플러그인 DuplicateElement.min.js를 로드합니다.

<script src="jquery.js"></script> 
<script src="duplicateElement.min.js"></script> 

사용자 정보 요소를 복사해야 한다고 가정합니다. 양식 html 구조는 다음과 같습니다.

<form id="myform" name="myform" action="post.php" method="post"> 
  <fieldset id="additional"> 
    <label for="name">客户姓名：</label> 
    <input id="name" name="name[]" type="text" class="input" > 
    <label for="flag">客户级别：</label> 
    <select id="flag" name="flag[]"> 
      <option disabled="" selected="">请选择</option> 
      <option value="1">VIP</option> 
      <option value="2">普通</option> 
     </select> 
      <a href="javascript:void(0);" class="btn remove">移除</a> 
      <a href="javascript:void(0);" class="btn create">复制</a> 
    </fieldset> 
    <br/> 
    <div class="sub_btn"> 
      <input type="submit" class="button" value="提交"> 
    </div> 
</form> 

jQuery

"복사" 버튼을 클릭하면 #additional의 내용이 복사됩니다. 이는 새 줄을 추가하는 것과 같습니다. 복사한 후에는 "복사" 버튼만 표시됩니다. "제거" 버튼을 클릭한 후 "제거"를 클릭하면 해당 행이 제거됩니다.

 $(function () { 
    $('#additional').duplicateElement({ 
      "class_remove": ".remove", 
      "class_create": ".create", 
      onCreate: function (el) { 
        el.find("select").prop('defaultSelected'); 
        el.find(".input").val(''); 
      } 
    }); 
  }); 

onCreate() 콜백 함수를 사용하여 성공적으로 복사한 후 새로 추가된 양식 요소의 속성(예: 양식 요소 값 또는 스타일 등)을 정의할 수도 있습니다.

위 내용은 소스 코드 공유 효과 시연이 포함된 jQuery 복사 양식 요소입니다. 모든 분들께 도움이 되기를 바랍니다.