CODEWITHSUNDEEP
javascripthtmlweb-storage
Rami Joulani
Rami Joulani

Reputation: 11

I want to save the data in a textbox created repeatedly in JavaScript using webstorage

this is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CV Information</title>
    <link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
    <header><b>CV Information</b></header>
    <!--<script src="Script1.js"></script>-->
    <div class="mydiv">
        <form action="CV_Viewer.html">
            <fieldset id="field">
                <div class="scrollable" id="scroll">
                    <header>Languages</header><br />
                    <label for="mLan">Your Mothertoungue:</label>
                    <input type="text" id="mLan" placeholder="Primary Language.." name="name" pattern="[A-Za-z ]{3,}" required><br><br>
                    <input type="button" id="plus" onclick="addTextBox()" class="plus" value="+ other languages..." name="plus" />
                </div>
                <div style="position: static">
                    <input type="submit" onclick="webstorage()" class="hov" style="margin-top:30px" value="Next">
                </div>
            </fieldset>
        </form>
    </div>
    <footer>
        Copyright&copy;2022 Rami Joulani
    </footer>
<script>
    let b = 1;
    let q=0;
    const array = [];
    function addTextBox() {
      b++;
      const textBox = document.createElement("INPUT");
      textBox.setAttribute("type", "text");
      textBox.setAttribute("placeholder", "Any Other Language...");
      textBox.setAttribute("pattern", "[A-Za-z ]{3,}");
      textBox.setAttribute("style", "margin-top:35px;");
      textBox.setAttribute("id",q);
      const div = document.getElementById("scroll");
      div.appendChild(textBox);
      var plus = document.getElementById("plus");
      div.insertBefore(textBox, plus);
      array[q] = textBox.value;
      console.log(array[q]);
      q++;
      return fieldSet();
    }
    function fieldSet() {
      const radio1 = document.createElement("input");
      radio1.setAttribute("type", "radio");
      radio1.setAttribute("id", "rad1");
      radio1.setAttribute("name", "connected");
      const div = document.getElementById("scroll");
      var plus = document.getElementById("plus");
      div.appendChild(radio1);
      div.insertBefore(radio1, plus);
      const begg = document.createElement("label");
      begg.setAttribute("for", "rad1");
      const begginer = document.createTextNode("Begginer");
      begg.appendChild(begginer);
      div.appendChild(begg);
      div.insertBefore(begg, plus); 
      const radio2 = document.createElement("input");
      radio2.setAttribute("type", "radio");  
      radio2.setAttribute("id", "rad2");
      radio2.setAttribute("name", "connected")
      div.appendChild(radio2);
      div.insertBefore(radio2, plus);
      const inter = document.createElement("label");
      inter.setAttribute("for", "rad2");
      const intermadiate = document.createTextNode("Intermadiate");
      inter.appendChild(intermadiate);
      div.appendChild(inter);
      div.insertBefore(inter, plus);
      const radio3 = document.createElement("input");
      radio3.setAttribute("type", "radio");  
      radio3.setAttribute("id", "rad3");
      radio3.setAttribute("name", "connected")
      div.appendChild(radio3);
      div.insertBefore(radio3, plus);
      const flu = document.createElement("label");
      flu.setAttribute("for", "rad3");
      const fluent = document.createTextNode("Fluent");
      flu.appendChild(fluent);
      div.appendChild(flu);
      div.insertBefore(flu, plus);
      plus.setAttribute("style", "margin-top:20px;")
      if(b==4) {
        plus.hidden=true;
      }
   }
   function webstorage() {
     localStorage.setItem("mothTong", document.getElementById("mLan").value);
   }    
</script>
</body>
</html>

I changed it multiple times when I tried to solve it

how can I save textBox value and the radio button values separately though they are created with the same attribute it might be simple but I just couldn't figure it out.

Don't point out to some missing stuff but if you please tell me how is it possible to do it depending on the general form of the code.

Upvotes: 1

Views: 52

Answers (0)

Related Questions