從html表單添加和刪除元素的最佳方法

我想用不同的輸入元素創建一個簡單的html表單。每個問題的問題和可能的選擇都存儲在數據庫中。這樣做是爲了使與PHP的形式和子輸入元素，所以一個簡單的PHP函數將根據是否爲type="text"或type="radio"排版的護理：從html表單添加和刪除元素的最佳方法

<form> 
First name: <input id="1" type="text" name="firstname"> 
Last name: <input id="2" type="text" name="lastname"> 
<input id="3" type="radio" name="sex" value="male">Male 
<input id="4" type="radio" name="sex" value="female">Female 
<div id="div_5_optional"> 
Maiden name: <input id="5" type="text" name="maidenname" disabled="disabled"> 
</div> 
</form>

現在，缺省情況input id="5"將被禁用。但我也想刪除它。我能夠在我的頭加載（雖然我不能保證招很聰明）使用JavaScript來得到它

<script> 
$(document).ready(function(){ 
    $("[disabled=disabled]").parent().remove(); 
}); 
</script>

到目前爲止好，div元素被移除。然而，當單擊與Female對應的單選按鈕時，我想將元素放回原始位置。我在標題中添加，略低於之前的js腳本這個

<script type='text/javascript' src='scripts/enable_elements.js'></script>

它加載這一功能

// enable_elements.js 

$(document).ready(function(){ 

    $('#4').click(function(){ 
    $('#5').prop("disabled", false); 
    }); 

});

然而，所有的東西不起作用。我想這個問題可能是我的ready(function)只在開始時加載一次，然後進入睡眠狀態？我應該以不同的方式構建我的表單嗎

來源

2014-10-27 CptNemo

如果您想稍後將其添加回去，爲什麼要刪除該元素？將它隱藏起來沒有任何意義嗎？ http://api.jquery.com/hide/ – 2014-10-27 06:13:17

取決於你想達到什麼，[你可以用CSS做到這一點]（http://jsbin.com/jiqej/1/edit?html,css,output） ... – misterManSam 2014-10-27 06:14:36

ready函數確保在DOM加載後加載函數。如你所說，它不會讓任何東西入睡。 – Arung 2014-10-27 06:15:15

你不想remove()創建一個事件處理器，而不是要hide()。

$(document).ready(function(){ 
    $("#5").hide(); 
});

另外你要處理的點擊#3：

$('#3').click(function(){ 
    $('#5').attr("disabled", "disabled").hide(); 
}); 
$('#4').click(function(){ 
    $('#5').attr("disabled", "").show(); 
});

注：我不停的「禁用」屬性，但實際上你並不需要它，因爲它會被隱藏起來時不能選擇。 ..

如果您刪除#5，那麼它會丟失，並且無法再顯示它。因此，點擊男性，然後點擊女性，再次點擊男性，再點擊女性......不起作用。

來源

2014-10-27 06:18:42

你需要爲女性和男性複選框調用你的功能和顯示或隱藏字段

來源

2014-10-27 06:13:06 lsteinme

從html表單添加和刪除元素的最佳方法

回答

相關問題