2014-04-13 4 views
0

데이터베이스에 새로운 사용자를 추가하는 양식이 있습니다. 모두 완벽하게 작동하지만 원하는 것은 한 번에 둘 이상의 사용자를 추가 할 수 있기 때문에 "다른 사용자 추가"를 클릭하면 사용자 추가를위한 다른 필드 목록이 나타납니다. 나는이 원하는,javascript로 양식의 다른 필드 목록 추가하기

Adding one user

그리고 :

여기

내가 사용자를 추가 할 때 내가 무엇을 가지고 : 나는 그래서 일부 사진을 추가 할 것입니다 정확히 설명하는 방법을 모른다 나는 다섯 번을 클릭하면

Adding two users

그래서, 그것은 나에게 오 "형태"를 보여줄 것이다 :이처럼, "다른 사용자 추가"다른 아래에 나에게 필드의 또 다른 목록을 표시하기 위해 클릭 할 때 그 원래 하나 :

Adding five users

이 다른 예와 함께 작업을 수행하는 방법을 보여줍니다,하지만 내 코드 테이블을 가지고 있으며, 형태가 그래서 그것을 수행하는 방법을 정확히 잘 모른다 어디 this question을 발견했습니다. 여기 내 양식 코드입니다 :

<table id="minimalist-table"> 
    <tr><th>Username</th><th>Password</th><th>Mail</th><th>Language</th><th>Sex</th></tr> 
    <form method="post" action="?action=users&sa=add"> 
    <tr> 
    <td><input type="text" name="username[]" required="required"></td> 
    <td><input type="password" name="password[]" required="required"></td> 
    <td><input type="email" name="email[]" required="required"></td> 
    <td><select name="language[]"> 
    <option value="en_US">English</option> 
    <option value="es_ES">Spanish</option> 
    </select></td> 
    <td><select name="sex[]"> 
    <option value="Male">Male</option> 
    <option value="Female">Female</option> 
    </select></td> 
    </tr> 
    <tr><td><input type="submit" value="Submit"> </td></tr> 
    </form></table> 

나는

내가이 모든 코드를 넣어 시도했습니다 ... 배열 (name="email[]"를 같은) 그것이 내가 데이터베이스에 대한 여러 요소를 처리 할 수있는 방법이기 때문으로 값이 함수로, 그래서 내가 함수를 호출하면 폼에 다른 그룹의 필드를 추가하지만 자바 스크립트로 어떻게 해야할지 모르겠다.
고마워!

<table id="minimalist-table"> 
... 
<tr class="template" style="display:none"> 
... all fields ... 
</tr> 
<tr class="submit_row"><td><input type="submit" value="Submit"> </td></tr> 

그래서 자바 스크립트에서 당신이 HTML를 얻기 위해이 작업을 수행 할 수 있습니다 (그리고 숨겨진 해제 :이 경우 나는 보통 추가해야 HTML을 포함하는 숨겨진 "템플릿"요소/행을 작성에서

+1

http://stackoverflow.com/questi을 보일 것이다

var row_template = $('#minimalist-table > .template').html().find(':input').prop('disabled', true) 

ons/19092894/new-rows-to-table-on-click-in-jquery –

+0

고마워, 모신! 그것은 완벽하게 작동 ... 나는 당신이 내게 준 질문의 단계를 따라 갔다. – peregraum

답변

1

입력) : 완성 된 코드가 검증되지 않은이 같은()

var row_template = $('#minimalist-table > .template').html() 
$('#add_row').on('click', function(){ 
    $('#minimalist-table .submit_row').before(row_template); 
}); 
+0

이것이 원하는 것입니까? 대답을 받아 들일 수 있습니까? – Thomas

+0

글쎄요, 정확하지 않습니다 ... 나는 주된 해답에 주석의 해답을 사용했는데 완벽하게 작동했습니다! – peregraum

관련 문제