CODEWITHSUNDEEP
javascripthtmldom
user2848403
user2848403

Reputation:

Using javascript and dom to create input from radio button

While working with code 1. I have set a restraint on the radio button press to work only once. The issue with this is if it is switched between no and yes several times that it will only work once. Code 2 has no set restraint causing the radio buttons to be pressed several times, but yes or no can be pressed several times causing several inputs. Is there a way which I could loop this or use an if statement to make it so that it can appear and disappear as many times as it would like without making more than 1 input box? I'm trying to keep this to JavaScript and DOM only. When I've tried making an if statement from a given element to make sure its valid, I get "[object HTMLInputElement]".

Code 1 with restraint on radio button. 

function myFunction() {
    var label = document.createElement("label");
    label.innerHTML = "<br>Shipment Cost : $";

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");


    var sp2 = document.getElementById("emailP");
    var parentDiv = sp2.parentNode;
    parentDiv.insertBefore(x, sp2);
    parentDiv.insertBefore(label, x);
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");

    alert("Added Text Box");

}
function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    anchor.parentNode.removeChild(anchor);
    anchor2 = document.getElementById("idForInput");
    anchor2.parentNode.removeChild(anchor2);
}

        </script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" onclick="myFunction2()" />Yes
  <input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No

  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <br>
  <br>
  <button>Submit</button>

</form>
    </body>
</html>

Code 2 with infinite radio button actions. 

<!DOCTYPE html>
<html>
    <head>        
    </head>
    <body>
        <script>

function myFunction() {
    var label = document.createElement("label");
    label.innerHTML = "<br>Shipment Cost : $";

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");


    var sp2 = document.getElementById("emailP");
    var parentDiv = sp2.parentNode;
    parentDiv.insertBefore(x, sp2);
    parentDiv.insertBefore(label, x);
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");

    alert("Added Text Box");

}
function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    anchor.parentNode.removeChild(anchor);
    anchor2 = document.getElementById("idForInput");
    anchor2.parentNode.removeChild(anchor2);
}

        </script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" onclick="myFunction2()" />Yes
  <input type="radio" name="tip3" value="4" onclick="myFunction()" />No

  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <br>
  <br>
  <button>Submit</button>

</form>
    </body>
</html>

Upvotes: 0

Views: 696

Answers (1)

Fasoeu
Fasoeu

Reputation: 1292

When you create or delete the elements you should check if they (still) exist.

You may try your "Code 2" with the following functions:

function myFunction() {
    var label = document.getElementById('idForLabel');
    var x = document.getElementById("input");
    if (!label && !x) {
        label = document.createElement("label");
        label.innerHTML = "<br>Shipment Cost : $";
        label.setAttribute("id", "idForLabel");
        x = document.createElement("input");
        x.setAttribute("type", "text");
        x.setAttribute("id", "idForInput");

        var sp2 = document.getElementById("emailP");
        if (sp2) {
            var parentDiv = sp2.parentNode;
            parentDiv.insertBefore(x, sp2);
            parentDiv.insertBefore(label, x);

            alert("Added Text Box");
        }
    }
}

function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    if (anchor) {
        anchor.parentNode.removeChild(anchor);
    }
    anchor2 = document.getElementById("idForInput");
    if (anchor2) {
        anchor2.parentNode.removeChild(anchor2);
    }
}

Upvotes: 1

Related Questions