Add input elements dynamically [pure JS]

Question

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>

Welcome to SO. Please provide a Minimal, Complete, and Verifiable example. Show us the code for your latest attempt and where you got stuck. and explain why the result is not what you expected. stackoverflow.com/help/mcve — Dragonthoughts
– Dragonthoughts, Commented Sep 4, 2018 at 8:20
I created you a snippet. Make sure your HTML is valid. In the original post you had style after </body> for example — mplungjan
– mplungjan, Commented Sep 4, 2018 at 8:24
You likely want to create a div and use appendChild to add a file and an input field — mplungjan
– mplungjan, Commented Sep 4, 2018 at 8:26
Thank you. But I don't know the "appendChild" function. How to use it? — Fourty-Two
– Fourty-Two, Commented Sep 4, 2018 at 8:33

mplungjan · Accepted Answer · 2018-09-04 08:38:34Z

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>

Collectives™ on Stack Overflow

Add input elements dynamically [pure JS]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related