Gather data from various HTML elements with JavaScript when submitting a form

Question

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form?

I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon form submission.

It just struck me that my current approach is incorrect as the items are not linked to the form.

What's the proper way to associate elements with the form and capture the values onSubmit?

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

.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>

javascript html css

Answer 1

Answer №1

Initially, your HTML code has a mistake. Here is the corrected version:

<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>

If you are using vanilla Javascript, you can skip using the form tag. Here's an alternative way to achieve it:

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

This example highlights one approach to solving the issue, but there are numerous other methods you could explore.

Answer 2

Initially, your HTML code has a mistake. Here is the corrected version:

<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>

If you are using vanilla Javascript, you can skip using the form tag. Here's an alternative way to achieve it:

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

This example highlights one approach to solving the issue, but there are numerous other methods you could explore.

Answer 3

Answer №2

It is true that the answers provided above are accurate. Fundamentally, when a <form /> element is submitted, any <input /> elements with a defined name attribute contained within it will be included in the submission process.

Answer 4

It is true that the answers provided above are accurate. Fundamentally, when a <form /> element is submitted, any <input /> elements with a defined name attribute contained within it will be included in the submission process.

Gather data from various HTML elements with JavaScript when submitting a form

Answer №1

Answer №2

Similar questions

Importing JWT in ES6SyntaxCreating ES6 imports

Obtain redirected JSON data locally using Angular 5

Issues with data retrieval from PHP file in AJAX submission

Use ng-repeat to extract information from an array and populate it into a datalist

Creating a Unique CSS Grid Border with Custom Images

Can you guide me on where to find the login with Facebook button on this site?

The efficiency of XSL Template is significantly impacting loading time

I continue to encounter the same error while attempting to deliver data to this form

There is a space separating the slider image and the navigation bar

When using React / Next.js, the .map() function may not rerender the output based on changes in the state array if the keys remain the same

Node.js is known for its ability to export both reference and pointer values

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

Guide on transporting PNG files over the boundary

Customize your Material-UI theme with a unique hover effect for contained buttons

Guide on how to smoothly navigate through an HTML page to a specific anchor point

What could be causing the error when attempting to release this Node-MySQL pool?

What can be done to avoid a form being reset when it returns no results?

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application

Mobile Iframe in Full View

Initiate an AJAX request to the server upon beforeunload event