how are you?
I have a form where I pretend to store schedule values that consist in first store data from a ´select´, the system date and finally for each day of the week I have a field that has one checkbox to enable/disable the schedule and initial and finish times on morning and afternoom, this will be sent to an esp32 which is acting as my web server but first I'm printing the form content on console to see if all the values are correctly stored.
But as not all could be perfect when I print the values then the value for the ´select´ doesn't appear to be stored on the FormData object as neither the values stablished through ´´, every else is stored correctly.
So, my question is how can I do store the '' and the '<input="time>' values.
Thanks in advance for the help, bellow is the code
Here is the html code
<body>
<div class="cuerpo_sistema">
<div class="configurar">
<form action="" id="forma">
<ul>
<div class="titulo_2">
<h2>Configuración de parámetros del tanque</h2>
</div>
<li>
<label for="forma">Forma del tanque <b></b></label>
<select class="forma-tanque">
<option value="caja">Caja</option>
<option value="cilindro">Cilindro</option>
<option value="semi-cono">Semi cono</option>
</select>
</li>
<li>
<label for="altura">Altura del tanque <b>[ m ]</b></label>
<input type="number" id="altura" name="altura-tanque" value="2.5" required>
</li>
<li>
<label for="volumen">Volumen máximo <b>[ l ]</b></label>
<input type="number" id="volumen" name="volumen-tanque" value="1000" required>
</li>
<li>
<label for="minVol">Volumen Mínimo <b>[ l ]</b></label>
<input id="number" name="volumen-minimo" value="50" required>
</li>
<div class="titulo_2">
<h2>Configuración de fecha y horarios de funcionamiento</h2>
</div>
<li>
<div class="fecha-prog">
<label for="Fecha">Fecha <b>[ dd/mm/aaaa ]</b></label>
<input type="date" id="fecha" name="fecha" value="2023-01-01" required>
</div>
</li>
<li>
<div class="div-hab">
<h3>Lunes</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00" required>
<input type="time" id="fin" value="06:30" min="00:00" max="12:00" required>
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Martes</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Miércoles</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Jueves</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Viernes</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Sábado</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<li>
<div class="div-hab">
<h3>Domingo</h3>
<input type="checkbox" name="habilitar" id="check">
</div>
<div class="hora-prog">
<div class="manana">
<h3>Mañana</h3>
<input type="time" id="inicio" value="06:00" min="00:00" max="12:00">
<input type="time" id="fin" value="06:30" min="00:00" max="12:00">
</div>
<div class="tarde">
<h3>Tarde</h3>
<input type="time" id="inicio" value="20:00" min="12:01" max="23:59">
<input type="time" id="fin" value="20:30" min="12:01" max="23:59">
</div>
</div>
</li>
<div class="guarda-conf">
<li>
<button type="submit">Guardar</button>
</li>
</div>
</ul>
</form>
</div>
</div>
</body>
and here is the code that prints (will store in future) the form data
var formElement = document.getElementById("forma");
formElement.addEventListener("submit", function(e) {
e.preventDefault();
var formData = new FormData(formElement);
for(var par of formData.entries()) {
console.log(par[0] + ", " + par[1]);
}
console.log(formData.entries());
});
and here is the console output
altura-tanque, 2.5
volumen-tanque, 1000
volumen-minimo, 50
fecha, 2023-01-01
To store the values of the select element and the time inputs in the FormData object, you need to give them unique name attributes. Currently, the select element does not have a name attribute and all the time inputs have the same name of "id". Giving them unique name attributes will allow them to be properly added to the FormData object when the form is submitted.
For example, you can add a name attribute to the select element like this:
<select class="forma-tanque" name="forma-tanque">
Also, you should avoid using repeated id attribute in your elements, because they could cause unexpected behaviours.
Once you've added the necessary name attributes, you can access the values in your JavaScript code using the FormData object.
let formData = new FormData(document.getElementById("forma"));
console.log(formData.get("forma-tanque"));
console.log(formData.get("lunes-morning-start"));
Please note that, you need to make the same changes for all the inputs and select elements you want to store in the FormData object.