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"> </span>
</div>
</form>
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"> </span>
</div>
</form>
Share
Improve this question
edited Sep 4, 2018 at 8:24
mplungjan
178k28 gold badges182 silver badges240 bronze badges
asked Sep 4, 2018 at 8:19
Fourty-TwoFourty-Two
771 silver badge6 bronze badges
4
- Wele 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./help/mcve – 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 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 Commented Sep 4, 2018 at 8:26
- Thank you. But I don't know the "appendChild" function. How to use it? – Fourty-Two Commented Sep 4, 2018 at 8:33
1 Answer
Reset to default 6You 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"> </div>
</div>
</form>