Home/ Questions/Q 8486459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:57:06+00:00

I have code like this: <html> <SCRIPT language=javascript> function add() { //Create an input

  • 0

I have code like this:

<html>
<SCRIPT language="javascript">

function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "line");


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Line");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "pie");

    var foo = document.getElementById("fooBar2");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Pie");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "trend");

    var foo = document.getElementById("fooBar3");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Monthly Trend");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);


     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "radio");
    element.setAttribute("name", "feed");
    element.setAttribute("id", "feed");
    element.setAttribute("value", "heatmap");


    var foo = document.getElementById("fooBar4");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);

}


function add2() {



  var d = document.getElementById('fooBar');
  var olddiv = document.getElementById("feed");
  d.removeChild(olddiv);

     //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "hidden");
    element.setAttribute("name", "comparison");
    element.setAttribute("name", "comparison");
    element.setAttribute("value", "comparison");


    var foo = document.getElementById("fooBar5");

    //Append the element in page (in span).
    foo.appendChild(element);

   var label=document.createTextNode("Heatmap");
   foo.appendChild(label);

   var br = document.createElement("br");
   foo.appendChild(br);



 }

</script>
 <br/>
<p align="left" id="status"><strong>Report type:</strong></p>
 <input type="radio" name="feed" id="feed" value="comparison" onclick="add2()" /> Comparison Report
<br/>
<br/>
<input type="radio" name="feed" id="feed" value="daily" onclick="add()" /> Individual Reports
<br/>
<form method="post" action ="http://localhost/ana/node/47">
<span id="fooBar">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar2">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar3">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar4">&nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="fooBar5">&nbsp; &nbsp; &nbsp; &nbsp;</span>
 <br />
 <br/>
  <p>
    <input type="submit" name="submit" id="submit" value="Next" />
  </p>

</form> 
</div>

 </html>

when we open the html page it’s like this:

  • Comparison Report
  • Individual Reports

And when we click the on Individual Reports it will be like this:

  • Comparison Report
  • Individual Reports
    • Line
    • Pie
    • Monthly Trend
    • Heatmap

My question is how to remove that childs radio buttons (line, pie, monthly trend, and heatmap) along with the labes when I change my selection from Individual Reports to Comparison Report?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I am understanding your question correctly, you want some sort of accordion with radiobuttons.

    This code does not remove them, it hides them, however I think that is really what you are after.

    This code requires jQuery, which is something I believe you should look into.

    http://jsfiddle.net/NHDmf/1/

    I made it as dynamic and independant as possible, so you can keep adding options to the Comparisson and Individual lists.

    • 0