추가 필드를 동적 필드

Question

사라 자바 스크립트하게 사용이 내 JS 코드입니다 : 내가 필드를 추가 할 때

<form method="post" enctype="multipart/form-data" name="form1" > 


<input type="submit" onclick="addInput()" name="add" value="Add Other" /> 
<div id="text"></div> 

<input type="submit" onclick="addInput1()" name="add1" value="Add Other" /> 
<div id="text1"></div> 

<input type="submit" onclick="addInput2()" name="add2" value="Add Other" /> 
<div id="text2"></div> 

<input type="submit" name="submit" value="Submit" /> 
</form> 

, 그것은 완벽하게 작동하지만,이 내 PHP 양식 코드

<script language="javascript"> 
function addInput() { 
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a1[]' size='60' />"; 
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a2[]' size='9' /><br />"; 
} 

function addInput1() { 
    document.getElementById('text1').innerHTML += "<input type='text' value='' name='b[]' size='30' /><br />"; 
} 

function addInput2() { 
    document.getElementById('text2').innerHTML += "<input type='text' value='' name='c[]' size='30' /> 
} 
</script> 

입니다 필드를 편집하려고하면 페이지가 재설정되고 추가 된 모든 필드가 사라집니다.

내 JS 코드에 문제가 있습니까? 이것을 할 수있는 다른 방법이 있습니까?

Answer 1

입력을 추가하기 위해 제출 버튼을 사용하고 있지만 제출 버튼은 버튼 입력을 사용하기 위해 양식을 더 잘 제출합니다.

<input type="button"> 

Answer 2

제출 단추는 양식을 제출하기위한 것입니다. 버튼을 사용하는 것이 더 좋지만, false을 반환하면 버튼의 기본 동작이 중지됩니다. 예는 :

function addInput() { 
    // your code 
    return false; 
} 

과 HTML에

: 주제 오프

<input type="submit" onclick="return addInput()" name="add" value="Add Other" />