I have made a form with some inputs including text , checkbox and file .
I present the problem with the last type (file) . I need to capture several photos from the camera of a mobile device. To get by, I inserted a table with 2 columns. In the first row, an input of type file , and a button with the intention of creating a new row and inserting an input of type file .
The button performs its function, adds the new line with the embedded input , but also after that, performs the form submission. I checked if it had DIV or curly braces but apparently, I can't imagine why it could be doing it.
They are not the only buttons that I have in the form, I have another one that gives me access to the camera with a script and it works well, I enclose the code of my table and of the JS function that I use:
function addrow()
{
var mytable = document.getElementById("addevidence");
var row = mytable.insertRow();
var newcell1 = row.insertCell();
var newcell2 = row.insertCell();
newcell1.innerHTML = '<input type="file" accept="image/*" capture="camera">';
newcell2.innerHTML = '';
}
<div class="container">
<label class="text-primary">Evidencias</label>
<div class="col-md-4">
<table class="table" id ="addevidence">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td>
<input type="file" accept="image/*" capture="camera">
</td>
<td>
<button id="addcamp" onclick="addrow()" class="btn">
<span>
<i class="fa-solid fa-file-image fa-2x"></i> addrow
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Fast answer
Put it like this (with its correct type
<form>
, otherwise it is believed to be a submit):Explanation
In your question it seems to work fine, but it is because you have not enclosed the input(s) between
<form></form>
, which is how the problem can be reproduced, as you can see in this snippet that it does:The solution is amazingly easy, and it involves adding the button type that is with its type="" , which in this case you'll want to be
type="button"
so that the browser doesn't think it's the other submit type .Here is another snippet with the button fixed: