jquery를 사용하여 양식 섹션을 추가하는 방법

사용자가 가족 구성원의 세부 정보를 입력해야하는 양식이 있습니다. 한 가족 구성원의 필드를 표시하고 싶습니다. '다른 가족 구성원을 추가하려면 클릭하십시오'라는 단추가 있습니다. 내 질문은 - jQuery를 사용하여 아래에있는 family div/fieldset의 정확한 복사본을 어떻게 추가 할 수 있습니까? 기존 클릭 하나?jquery를 사용하여 양식 섹션을 추가하는 방법

<form method="post" action=""> 
    <div class="family-member"> 
     <ul> 
      <li> 
       <label for="first-name">First Name</label> 
       <input type="text" name="first-name"> 
      </li> 
      <li> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname"> 
      </li> 
     </ul> 
    </div> 
    <a>Click to add another family member</a> 
</form>

출처

2013-09-29 Dan Temple

근무 코드 : 이것에 대한

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(e) { 
    $('#add_more').click(function(e) { 
     $(this).before($('.family-member:eq(0)').html()); 
    }); 
}); 
</script> 
</head> 

<body> 
<form method="post" action=""> 
    <div class="family-member"> 
     <ul> 
      <li> 
       <label for="first-name">First Name</label> 
       <input type="text" name="first-name"> 
      </li> 
      <li> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname"> 
      </li> 
     </ul> 
    </div> 
    <a id="add_more" href="javascript:void(0);">Click to add another family member</a> 
</form> 
</body> 
</html>

출처

2013-09-29 12:21:03

감사합니다! 패밀리 멤버 div 내에 스팬을 추가 할 수있는 방법이 있습니까? 매번 1 씩 증가하므로 '패밀리 멤버 1', '패밀리 멤버 2'등을 표시 할 수 있습니까? –

무엇 append() 또는 .after() 기능을 사용하여 <a> 태그를 추가 한 후 UL 요소를 얻고 그에 .html() 함수를 호출하는 약. 예 :

var formHtml = $("ul").html(); 
$("a").append(formHtml);

출처

2013-09-29 12:15:39 blackpanther

는 html 및 append 방법을 사용

var html = $('.family-member:eq(0)').html(); 
$('form').append(html);

eq(0)이 첫 번째 "가족"복제하는 데 사용됩니다.

출처

2013-09-29 12:17:35

jquery를 사용하여 양식 섹션을 추가하는 방법

답변

관련 문제