添加字段使用JavaScript動態，使場消失

這是我的JS代碼：添加字段使用JavaScript動態，使場消失

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

這是我的PHP形式代碼：

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

當我添加字段，它完美的作品，但是當我嘗試編輯該字段，頁面重置，所有添加的字段消失。

我的JS代碼有問題嗎？有沒有其他方法可以做到這一點？

來源

2013-03-02 Redzwan Latif

題外話，但'elem.innerHTML + = 「...新內容......」'有很大的破壞性。雖然可能有些情況下它沒有太大的區別，但我建議避免這種做法。在你的情況下，它會清除被破壞的輸入值。 – 2013-03-02 16:22:51

您使用提交按鈕添加輸入，但提交按鈕更好地使用按鈕輸入來提交表單，例如，

<input type="button">

來源

2013-03-02 16:22:15 Musa

非常感謝您的回答：D。沒想到這會很簡單。：D。非常感謝您的幫助：D – 2013-03-02 17:07:38

提交按鈕用於提交表單。最好使用按鈕，但也返回false將停止按鈕的默認行爲。例如：

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

，並在HTML：

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

來源

2013-03-02 16:40:30

感謝您的回答：D。這很有幫助。非常感謝您的幫助。再次感謝：D – 2013-03-02 17:08:28

添加字段使用JavaScript動態，使場消失

回答

相關問題