CODEWITHSUNDEEP
javascript
Fourty-Two
Fourty-Two

Reputation: 77

Add input elements dynamically [pure JS]

I'm new to JS and need your help!
I have an upload formula where the user can add multiple files to a db (php, mysql).

Now I want that the input buttons will added dynamically, means when 1 field is filled, a other field shows up and so on and so forth.
Every file do have also a title field, it would looks like this

                    Add one more file
+--------------+    +---------------+
|              |    |       +       |
|  ヽ( ≧ω≦)ノ   |   |     ++++++     |
|              |    |       +       |
+--------------+    +---------------+
> Titel ABC    <    > ______________<

I would hide the input button and will replace it with an image with a "+" or something, but this is not part of this question, just you can see, what i try to reach at the end of the day :)

This is a code, which i found in the internet and edited a bit, but I have problems to replace the "option" with input=file + input=text. So when the user clicks on "add" a select button and a text field will show up.

function add(type) {
  //Create an input type dynamically.
  var element = document.createElement("input");

  //Assign different attributes to the element.
  element.setAttribute("type", type);
  element.setAttribute("value", type);
  element.setAttribute("name", type);

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

  //Append the element in page (in span).
  foo.appendChild(element);
}
* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

body {
  background-color: grey;
}

h1 {
  color: white;
}

h2 {
  color: darkgrey;
}
<form>
  <h1>Add input elements dynamically</h1>
  <h2>Please select any type</h2>

  <div>
    <select name="element">
      <option value="file">File</option>
      <option value="text">TextBox</option>
    </select>

    <input type="button" value="add" onclick="add(document.forms[0].element.value)" />
    <span id="fooBar">&nbsp;</span>
  </div>
</form>

Upvotes: 2

Views: 8866

Answers (1)

mplungjan
mplungjan

Reputation: 177691

You want to create a div and use appendChild to add a file and an input field : 

window.addEventListener("load", function() {
  document.getElementById("add").addEventListener("click", function() {
    // Create a div
    var div = document.createElement("div");

    // Create a file input
    var file = document.createElement("input");
    file.setAttribute("type", "file");
    file.setAttribute("name", "file"); // You may want to change this

    // Create a text input
    var text = document.createElement("input");
    text.setAttribute("type", "text");
    text.setAttribute("name", "text"); // you may want to change this

    // add the file and text to the div
    div.appendChild(file);
    div.appendChild(text);

    //Append the div to the container div
    document.getElementById("container").appendChild(div);
  });
});
* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

body {
  background-color: grey;
}

h1 {
  color: white;
}

h2 {
  color: darkgrey;
}
<h1>Add input elements dynamically</h1>
<form>
  <div>
   <input type="button" value="add" id="add" />
    <div id="container">&nbsp;</div>
  </div>
</form>

Upvotes: 6

Related Questions