javascript - 在表单提交时使用 javascript 捕获多个 HTML 元素值

Question

我如何从 HTML 元素中捕获值并发送它们以通过表单进行处理？

我正在尝试创建一个菜单项列表，我已经构建了各个元素的结构，但是，我对如何在提交表单时捕获值感到困惑。

当我输入这个时，我才意识到我下面的尝试是不正确的，因为这些元素与表单没有关联。

如何正确地将元素与表单相关联并捕获 onSubmit 的值。

const form = document.querySelector('#menu-item-form');
form.addEventListener('submit', function() {
  console.log(this.querySelector(' * .topping'))
})

.menu-item {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  height: 20rem;
  max-height: auto;
  padding: .5rem;
  margin: 2rem auto;
}

.menu-item #menu-item-form {
  display: none;
}

.menu-item .item {
  flex-basis: 50%;
}

.menu-item .price,
.menu-item .topping {
  align-self: center;
  margin-top: 2rem;
}

.menu-item button {
  flex-basis: 20%;
  margin-top: 2rem;
  height: 3.5rem;
  align-self: center;
}

.menu-item .item img {
  object-fit: cover;
  width: 100%;
  height: 80%;
}

.menu-item .item p {
  margin: 0;
  font-family: "Blanch";
  font-size: 5rem;
  color: rgb(34, 33, 33);
}

<li class="menu-item">
  <form id="menu-item-form">
  </form>
  <div class="item">
    <p class="item-name">name</p>      // capture
    <img src="../../assets/img/menu/bbq-chicken pizza.jpg">
  </div>
  <span class="topping">
                <select name="topping" id=""> // capture
                  <option value="">Topping</option>
                  <option value="tomato">Tomato</option>
                  <option value="pepperoni">Pepperoni</option>
                </select>
                </span>
  <span class="price">1350.00</span>    // capture
  <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>   // submit
</li>

Answer 1

首先你的 HTML 代码是错误的这是正确的方法:

<li class="menu-item">
    <form id="menu-item-form">
        <div class="item">
            <p class="item-name">name</p> // capture
            <img src="../../assets/img/menu/bbq-chicken pizza.jpg">
        </div>
        <span class="topping">
            <select name="topping" id=""> // capture
                <option value="">Topping</option>
                <option value="tomato">Tomato</option>
                <option value="pepperoni">Pepperoni</option>
            </select>
        </span>
        <span class="price">1350.00</span> // capture
        <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
    </form>
</li>

下一步，如果你打算使用 vanilla Javascript。您甚至不需要使用表单标签和。 这是如何操作的示例:

My HTML

<li class="menu-item">
    <div id="menu-item-form">
        <div class="item">
            <p class="item-name">name</p> // capture
            <img src="../../assets/img/menu/bbq-chicken pizza.jpg">
        </div>
        <div class="item">
            <input class="field" name="firstname" type="text">
        </div>
        <div class="item">
            <input class="field" name="lastname" type="text">
        </div>
        <div class="item">
            <select class="field" name="topping"> // capture
                <option value="">Topping</option>
                <option value="tomato">Tomato</option>
                <option value="pepperoni">Pepperoni</option>
            </select>
        </div> 
        <button class="btn-send-data" id="send-data" type="submit">Add to Order</button>
    </div>
</li>

My Javascript

function saveData() {
    const myDataForm = document.getElementById('menu-item-form');
    const dataFields = myDataForm.querySelectorAll('[class^="field"]');
    let params = {};
    dataFields.forEach((element) => {
        params[element.name] = element.value
    });
    const request = new XMLHttpRequest();
    request.open('POST', 'http://myexample.com/mywebservice');
    request.setRequestHeader('Content-Type', 'application/json'); 
    request.send(JSON.stringify(params));
} 
const btnSendData= document.getElementsByClassName('btn-send-data');
Object.keys(btnSendData).forEach((key) => {
    btnSendData[key].addEventListener('click', saveData);
});

这只是一个简单的示例，但您可以找到其他方法来解决这个问题。