Home / Questions / 217082
Accepted
Nacho Zve De La Torre
Asked: 2020-11-27 08:02:16 +0800 CST 2020-11-27 08:02:16 +0800 CST

How to send an array of input's to a Spring controller from JavaScript?

  • 772

I'm having a lot of trouble doing what I need.

I will explain the code and the problem:

enter image description here

The user must choose the flavors of ice cream they want by clicking on the checkboxes in the image and then submit the order using the "Submit Order" button.

<!-- Modal -->
<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <form id="vasitoForm" method="post">
            <table class="tabla">
                    <tr th:each="gusto : ${gustos}">
                        <td class="flavour" th:text="${gusto.nombre}"></td>
                        <td><input class="single-checkbox" type="checkbox" th:value="${gusto.id}"/></td>
                    </tr>
            </table>
            <p id="errorGustos"></p>
            <button type="submit" class="btn-submit">Enviar Pedido</button>
        </form>
    </div>
</div>

My JavaScript code validates which likes were clicked and saves them in an array. It should then POST that array to the Java driver.

/* Validar checkboxes clickeados */
var checkboxes = document.querySelectorAll('.single-checkbox');
var clickeados = [];

checkboxes.forEach(elem => {
    elem.addEventListener('change', (event) => {
        event.stopPropagation();
        if(elem.checked) {
           if(!clickeados.includes(elem)){
                   clickeados.push(elem);
                   console.log(clickeados);
           }
        }
        else{
            if(clickeados.includes(elem)){
                   clickeados.pop(elem);
                   console.log(clickeados);
            }
        }
    });
});

/* Validar cuantos gustos fueron seleccionados antes de hacer el submit */
$('#vasitoForm').on('submit', (event) => {
    if(clickeados.length == 0){
        event.preventDefault();
        document.getElementById("errorGustos").innerHTML = "Debe seleccionar por lo menos un gusto";
    }
    else if(clickeados.length > 0 && clickeados.length < 3){
        $('#vasitoForm').attr('action', clickeados + '/pedido');
    }
});

The message is done but the Spring controller receives the array as "[object HTMLInputElement]" and not as an array for me to validate....

Here I am stuck, I don't know how to validate the array data from the controller (the checkboxes that were clicked) so that I can later show the selected likes to the user in a new page.

Any ideas ?

This is the controller code, but I don't think it's right because it doesn't work for me:

    @RequestMapping(value="{gustos}/pedido", method = RequestMethod.POST)
    public void pedido(HttpServletRequest request) {

        Map<String, String[]> dataFeed = request.getParameterMap();

        for (Map.Entry<String, String[]> entry : dataFeed.entrySet()) {
            for (String str : request.getParameterValues(entry.getKey())) {
                int gustoId = Integer.parseInt(entry.getKey());
                Gusto gusto = gustoService.findGustoById(gustoId);
                System.out.println(gusto.toString());
//                if (str.equals("some-value")) { // where some-value is value="some-value" on your checkbox
//                    // do something with the gusto
//
            }
        }
    }
javascript

1 Answers

  1. Best Answer

    When you have several fields with the same name in a form, they are grouped in an array when sending your request (when submitting). In the case of checkboxes, the values ​​(value) of all those that are marked are sent:

    const form=document.getElementById('form');

form.addEventListener('submit',(event) =>{
   const fd= new FormData(form);
   
  console.log(fd.getAll('box'));
  event.preventDefault();
});

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" name="box" value="prueba1"/><label>Prueba1</label>
<input type="checkbox" name="box" value="prueba2"/><label>Prueba2</label>
<input type="checkbox" name="box" value="prueba3"/><label>Prueba3</label>
<input type="checkbox" name="box" value="prueba4"/><label>Prueba4</label>
<input type="checkbox" name="box" value="prueba5"/><label>Prueba5</label>
<button>test</button>
</form>

    I do a prevent default to prevent the submit from being done, we just want to simulate it, but you can see that in the console you can see what is going to be sent

    • 1