从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表单添加和删除元素的最佳方法

回答

相关问题