Javascript help. Adding/removing form element to DOM.

Question

Hi, if radio button 2 is checked add input box into datesettings. How do i add an input box? If radio button 1 is checked do nothing but if button 2 was checked previously remove children. Can you help me

Thanks

    function CheckDateOptions() {
var o1 = document.getElementById("dateoption1");
var o2 = document.getElementById("dateoption2");
var eSettings = document.getElementById("datesettings");
if(o1.checked) {
    //Remove o2 children
}
else if(o2.checked) {
    //How do I add an input box?
}

}

    <input type="radio" id="dateoption1" name="dateoption" value="1" onclick="CheckDateOptions();">
<input type="radio" id="dateoption2" name="dateoption" value="2" onclick="CheckDateOptions();"> 

<span id="datesettings">//Add input box here if dateoption2 is checked</span>

Answer 1

The simplest route would be:

<input type="radio" id="dateoption1" name="dateoption" value="1" ="ToggleDateOptions(true);" />
<input type="radio" id="dateoption2" name="dateoption" value="2" ="ToggleDateOptions(false);" /> 

<span id="datesettings">
  <input type="text" id="dateSetting" />
</span>

<script>
    function ToggleDateOptions(oneChecked) {
if(oneChecked)
{
    $("#dateSetting").hide();
}
else
{
    $("#dateSetting").show();
}
}
</script>

Or if you didn't want to use JQuery (Which is used above) you could do:

if(oneChecked)
    {

        document.getElementById("dateSetting").style.display = 'none';
    }
    else
    {
        document.getElementById("dateSetting").style.display = 'inline';
    }

Answer 2

You can just use innerHTML to add the input field.

Something like this should work for you

<script type="text/javascript">
    function CheckDateOptions() {
        var o1 = document.getElementById("dateoption1");
        var o2 = document.getElementById("dateoption2");
        var eSettings = document.getElementById("datesettings");
    if(o1.checked) {
        eSettings.innerHTML = "";
    } else if(o2.checked) {
        eSettings.innerHTML = '<input type="text" name="field" />';
    }
}
</script>

<input type="radio" id="dateoption1" name="dateoption" value="1" onclick="CheckDateOptions()"/>
<input type="radio" id="dateoption2" name="dateoption" value="2" onclick="CheckDateOptions()"/>

<span id="datesettings"></span>

Demo