Dealing with multiple forms without unique id:s? - ecmascript-6

Question

I'm rendering mulitple forms like this:
trait = (name, dice, mod) => {
return `
<tr><form action="#" onsubmit="renderRoll()">
<td><label>${name}</label></td>
<td><input type="text" name="dice" value="${dice}"></td>
<td><input type="text" name="mod" value="${mod}"></td>
<td><input type="submit" value="Slå" name="roll" ></td>
</form></tr>`;
};
document.getElementById('content').innerHTML += trait;
The forms don't have unique id:s and there are always more than one in the DOM. How can I run renderRoll() and access the values of the form that was triggered?

Answer 1

You have to pass an argument inside function "renderRoll()" to work.
<form action="#" onsubmit="renderRoll(event)">
function renderRoll(event) {
//here is your target...
var target = event.target;
alert(target.innerHTML);
}

Answer 2

I suggest you use a unique id as a name for the form element like as below:
 
const trait = (id, name, dice, mod) => {
return `
<tr><form name="${id}" action="#" onsubmit="renderRoll">
<td><label>${name}</label></td>
<td><input type="text" name="dice" value="${dice}"></td>
<td><input type="text" name="mod" value="${mod}"></td>
<td><input type="submit" value="Slå" name="roll" ></td>
</form></tr>`;
};
document.getElementById('content').innerHTML += trait("form", "test", "test", "test");
And use form data whenever form has triggered:
function renderRoll() {
let data = document.forms.namedItem("form").elements;
data = [...data].map(({name, value}) => ({name, value}));
console.log(data)
}
I hope it will be useful.