Работа с несколькими формами без уникального идентификатора: s?

Question

Я рендерил несколько форм следующим образом:

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;

Формы не имеют уникальных идентификаторов: в DOM всегда есть более одной.Как я могу запустить renderRoll() и получить доступ к значениям формы, которая была запущена?

Answer 1

Я предлагаю вам использовать уникальный идентификатор в качестве имени для элемента формы, как показано ниже:

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");

И использовать данные формы при каждом запуске формы:

function renderRoll() {
    let data = document.forms.namedItem("form").elements;
    data = [...data].map(({name, value}) => ({name, value}));

    console.log(data)
}

Надеюсьэто будет полезно.

Answer 2

Вы должны передать аргумент внутри функции "renderRoll ()" для работы.

<form action="#" onsubmit="renderRoll(event)">

function renderRoll(event) {
//here is your target...
var target = event.target;
alert(target.innerHTML);
}