如何获取动态添加输入的值

Question

我对 Js 有一些问题。当用户单击按钮时，我需要在 HTML 文档中添加一个表单。我写了这段代码：

plusBtn.addEventListener('click', () => {
    const newLine = document.createElement('div');
    newLine.classList.add('line');
    newLine.innerHTML = `
        <textarea form="shopForm" class="form-control form-data" name="comment" id="comment" rows="3" placeholder="Комментарий" required></textarea>
        <input form="shopForm" type="text" class="form-control form-data" name="price" id="price" placeholder="Цена" required>
        <input form="shopForm" class="form-data" type="number" name="amount" id="amount" required>`;
    dataForm.append(newLine);
});

我需要以我的自定义格式创建一个包含多个项目的 formData。在我的 HTML 文档中，我有 <form> 和 js 在表单中添加我的输入。因为我使用.querySelectorAll，所以我无法访问这些输入，因为它们是动态节点。

dataForm.addEventListener('submit', function(e) {
    e.preventDefault();
    console.log(window);
    const formData = new FormData(dataForm),
            comment = document.querySelectorAll('.form-comment'),
            price = document.querySelectorAll('.form-price'),
            amount = document.querySelectorAll('.form-amount');

    console.log(comment);

    formData.append('product_url', productUrl.value);
    formData.append('user_id', userId);
    formData.append('delivery_type_id', delivery.value);
    formData.append('package_type_id', package.value);
    if (comment.length > 1) {
        let items = [];
        comment.forEach((item, i) => {
            let obj = {};
            obj.comment = item.value;
            obj.price = price[i].value;
            obj.amount = amount[i].value;
            items.push(obj);
        });
        formData.append('items', JSON.stringify(items));
    } else {
        let items = [];
        items.push({
            'comment': comment[0].value,
            'price': price[0].value,
            'amount': amount[0].value
        });
        formData.append('items', JSON.stringify(items));
    }

    dataAjaxSend(formData)
        .then((response) => {
            console.log(JSON.parse(response));
        })
        .catch((err) => console.log('Eror' + err))
});

我不知道如何创建输入并访问它们。谢谢你的帮助）

Answer 1

仅仅因为你使用js创建了dom节点并不意味着你不能访问它们。他们在那里，你可以得到他们。您的问题是您正在使用document.querySelectorAll('.form-comment') 并且在创建它时没有将该类添加到其中。

plusBtn.addEventListener('click', () => {
    const newLine = document.createElement('div');
    newLine.classList.add('line');
    newLine.innerHTML = `
        <textarea form="shopForm" class="form-control form-data form-comment" name="comment" id="comment" rows="3" placeholder="Комментарий" required></textarea>
        <input form="shopForm" type="text" class="form-control form-data form-price" name="price" id="price" placeholder="Цена" required>
        <input form="shopForm" class="form-data form-amount" type="number" name="amount" id="amount" required>`;
    dataForm.append(newLine);
});

还要避免在元素上使用相同的 ID，IDS 是唯一的。因为您没有为这些元素使用标签，所以不需要 id。

Answer 2

你犯了一个小错误，没有添加你后来在.querySelectorAll中搜索的类

newLine.innerHTML = `
    <textarea form="shopForm" class="form-comment form-control form-data" name="comment" id="comment" rows="3" placeholder="Комментарий" required></textarea>
    <input form="shopForm" type="text" class="form-price form-control form-data" name="price" id="price" placeholder="Цена" required>
    <input form="shopForm" class="form-amount form-data" type="number" name="amount" id="amount" required>`;

查看并运行下面的代码 sn-p 以获得更好的理解。

const plusBtn = document.getElementById('plus')

const dataForm = document.getElementsByTagName('form')[0]

plusBtn.addEventListener('click', () => {
    const newLine = document.createElement('div');
    newLine.classList.add('line');
    newLine.innerHTML = `
        <textarea form="shopForm" class="form-comment form-control form-data" name="comment" id="comment" rows="3" placeholder="Комментарий" required></textarea>
        <input form="shopForm" type="text" class="form-price form-control form-data" name="price" id="price" placeholder="Цена" required>
        <input form="shopForm" class="form-amount form-data" type="number" name="amount" id="amount" required>`;
    dataForm.append(newLine);
});

const submitFunc = function(e) {
    e.preventDefault();

    const formData = new FormData(dataForm),
            comment = document.querySelectorAll('.form-comment')[0],
            price = document.querySelectorAll('.form-price')[0],
            amount = document.querySelectorAll('.form-amount')[0];

    console.log(comment);

    formData.append('product_url', productUrl.value);
    formData.append('user_id', userId);
    formData.append('delivery_type_id', delivery.value);
    formData.append('package_type_id', package.value);
    if (comment.length > 1) {
        let items = [];
        comment.forEach((item, i) => {
            let obj = {};
            obj.comment = item.value;
            obj.price = price[i].value;
            obj.amount = amount[i].value;
            items.push(obj);
        });
        formData.append('items', JSON.stringify(items));
    } else {
        let items = [];
        items.push({
            'comment': comment[0].value,
            'price': price[0].value,
            'amount': amount[0].value
        });
        formData.append('items', JSON.stringify(items));
    }

    dataAjaxSend(formData)
        .then((response) => {
            console.log(JSON.parse(response));
        })
        .catch((err) => console.log('Eror' + err))
    return false
}

dataForm.addEventListener('submit', submitFunc)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id="plus">Plus</button>
    <form>
      <input name="dummy" value="dummy" />
      <input type="submit" />
    </form>
    <script src="script.js"></script>
  </body>
</html>