Create input dynamically

Question

I want to insert an input(type=file) when I click the button using js but the input element appear for miliseconds and then right after it dissapears. Here's my code:

function addInputImg(){
            var div2 = document.getElementById("imgFiles");
            var inputImg = document.createElement('input');
            inputImg.type = 'file';
            div2.appendChild(inputImg);     
        }
<form ...>
.
.
<button id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>
<div  id='imgFiles'>
</div>
</form>

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-08 17:08:54Z

2

Button <button> inside a form element are treated like a submit button by default. In your case, when you are pressing the button inside the form, the form is getting submitted and the page gets reloaded every time.

Try to set your button's type attribute as button to avoid this issue.

<button type="button" id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>

edited Mar 8, 2016 at 17:08

answered Mar 8, 2016 at 17:03

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeoj · Accepted Answer · 2016-03-08 17:07:29Z

0

Change the button type to "button" to prevent the form from being submitted.

https://jsfiddle.net/g5Lxr2ac/

<button id='btnAgregarImg' type="button" onclick="addInputImg();">Agregar imagen</button>

answered Mar 8, 2016 at 17:07

jeoj

6536 silver badges9 bronze badges

Comments

BeoWulf · Accepted Answer · 2016-03-08 17:39:11Z

0

Change this:

<button id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>

To this:

<button id='btnAgregarImg' type="button" onclick="addInputImg();">Agregar imagen</button>

answered Mar 8, 2016 at 17:39

BeoWulf

6572 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Create input dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related