从html表单中添加和删除元素的最佳方法 - Best approach to add and remove elements from an html form

Best approach to add and remove elements from an html form

我想创建一个带有不同inputs元素的简单html表单。问题和每个问题的可能选择存储在数据库中。这个想法是用PHP呈现表单和子输入元素，因此一个简单的PHP函数将根据是type="text"还是type="radio":来处理排版

<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)一开始只加载了一次，然后就进入了睡眠状态？我应该以不同的方式构建我的表格吗？

您不想要remove()，而是想要hide()。

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

您还想处理点击#3:

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

注意：我保留了"disabled"属性，但实际上你不需要它，因为当不可选择时它会被隐藏。。。

如果删除#5，则它将丢失，无法再次显示。所以点击男性，然后点击女性，回到男性，再点击女性。。。不会起作用。

您需要为雌复选框和雄复选框创建一个事件处理程序，以调用您的函数并显示或隐藏字段