• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to add and remove fieldsets from a form?


So, I got the
part OK, but now how do I add it back?

The function I wrote that doesn't work to add is this below, but I can't get it to work on adding the fieldset.

function doublePumpf(){ 
if(document.getElementById ("pump2").checked) {   
const secondPinfo = document.getElementById ("fieldsetpump2");   
const para = document.createElement ("p");   
const element2 = document.getElementById("parentfieldset");   

All fieldsets are wrapped in a parent fieldset with 3 sub fieldsets, and each 3 subfieldsets have one more filedset inside.

For this function I am trying to add and remove only the 3 main sub fieldsets that are directly wrapped under the main parent fieldset.

The radio selector to check if it is checked is outside the fieldset and is this one with

<input type="radio" name="pumpselect" id= pump2 value="doublePump" onclick = "doublePumpf()">
  <label for="pump2"> Double Pump</label><br>

And the fieldset that I am testing and I can't get it to add is this one below (
<fieldset id = fieldsetpump2>
), which also has another internal fieldset inside of it.

<fieldset id = fieldsetpump2>
  <h4> <u>  Second stage pump. </u> </h4>
  <label for="gpmPump2" style= "margin-bottom:20px">* GPM (second stage): </label>
  <input type="number" id="gpmPump2" style = "bottom-margin:3px" name="gpmPump2" placeholder = "GPM required" required ><br>
  <label for="pressure2" style= "margin-bottom:20px"> * Pressure (psi):</label>
  <input type="number" id="pressure2" name="pressure2" placeholder = "Max Cont. pressure 2" required> <br>
    Type for second stage pump.
  <input type="radio" name="p2type" value="p2fixed" checked>
  <label for="p2fixed"> Fixed displacement </label>
  <input type="radio" name="p2type" value="p2variable">
  <label for="p2variable"> Variable displacement</label><br>
<fieldset id = p2controlselect>
    Controls for variable displacement second stage pump
  <input type="radio" name="p2control" value="p2pressurecomp" checked>
  <label for="p2pressurecomp"> Pressure Compensated </label>
  <input type="radio" name="p2control" value="p2loadsensing">
  <label for="p2loadsensing"> Load Sensing</label><br>
  <input type="radio" name="p2control" value="p2pressurecompwithremote">
  <label for="p2pressurecompwithremote"> Pressure Compensated with Remote Control </label>
  <input type="radio" name="p2control" value="p2hplimiter">
  <label for="p2hplimiter"> HP Limiter </label><br>
   <input type="radio" name="p2control" value="p2other">
  <label for="p2other"> Other (please comment in notes below) </label><br> <br>

New Threads

Latest posts

Buy us a coffee!

Top Bottom