How to extract data from a selectbox in html, JS and load it in an ESP32 variable?

Projects Programming
1

Hello again! Let's see how I can explain it in the best way (so that the google translator doesn't lie...)

I am with an ESP32 and I have created a server with ESPAsyncWebServer.h After almost finishing all the visual issues (I have another problem, sometimes the web does not load well, it only happens on my mobile, on the PC there are no problems, I have to look for another mobile for more tests...) I had to make a selectbox, but not the html one (since apparently it can't be customized with CSS) and I created it as in a youtube tutorial (this works fine...) I have the problem when I want to send the selected data (number1, number2.....) to the ESP so that it loads the data in a variable... my question is basically how do I get the data so that the ESP has it? According to the selectbox tutorial, the data is stored in a hidden input.

I suppose that some more information will be needed.... you ask me for anything.
Thanks greetings!
P.d also has a JS for the menu.

2

Not sure what you are doing. Do you mean the dropdown select where you chose an option? That returns an argument with the selected value, similar to radio buttons.

3

Perhaps if you could provide the smallest possible example (i.e. not your entire project) that shows the challenge you are facing.

There are two benefits to this.

  1. It will make it easier for people to gelp you.
  2. In preparing that, you might work out what the problem is and how to resokve it.
4

Hello, I am showing you the example of the tutorial, which is basically the same as I have, removing the number of options, names and CSS configuration but otherwise it is the same, and the JS is exactly the same.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Select Personalizado</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet"> 
	<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
	
	<div class="contenedor">
		<form action="">
			<div class="selectbox">
				<div class="select" id="select">
					<div class="contenido-select">
						<h1 class="titulo">Selecciona tu pais</h1>
						<p class="descripcion">Lorem ipsum dolor sit.</p>
					</div>
					<i class="fas fa-angle-down"></i>
				</div>

				<div class="opciones" id="opciones">
					<a href="#" class="opcion">
						<div class="contenido-opcion">
							<img src="img/mexico.png" alt="">
							<div class="textos">
								<h1 class="titulo">Mexico</h1>
								<p class="descripcion">Lorem ipsum dolor sit.</p>
							</div>
						</div>
					</a>
					<a href="#" class="opcion">
						<div class="contenido-opcion">
							<img src="img/spain.png" alt="">
							<div class="textos">
								<h1 class="titulo">España</h1>
								<p class="descripcion">Consectetur adipiscing elit.</p>
							</div>
						</div>
					</a>
					<a href="#" class="opcion">
						<div class="contenido-opcion">
							<img src="img/colombia.png" alt="">
							<div class="textos">
								<h1 class="titulo">Colombia</h1>
								<p class="descripcion">Suspendisse eleifend venenatis.</p>
							</div>
						</div>
					</a>
					<a href="#" class="opcion">
						<div class="contenido-opcion">
							<img src="img/argentina.png" alt="">
							<div class="textos">
								<h1 class="titulo">Argentina</h1>
								<p class="descripcion">Sed posuere laoreet dui.</p>
							</div>
						</div>
					</a>
					<a href="#" class="opcion">
						<div class="contenido-opcion">
							<img src="img/chile.png" alt="">
							<div class="textos">
								<h1 class="titulo">Chile</h1>
								<p class="descripcion">Dignissim hendrerit odio rhoncus.</p>
							</div>
						</div>
					</a>
				</div>
			</div>

			<input type="hidden" name="pais" id="inputSelect" value="">
		</form>

	</div>

	<script src="js/main.js"></script>
</body>
</html>

and this is the JS

const select = document.querySelector('#select');
const opciones = document.querySelector('#opciones');
const contenidoSelect = document.querySelector('#select .contenido-select');
const hiddenInput = document.querySelector('#inputSelect');

document.querySelectorAll('#opciones > .opcion').forEach((opcion) => {
	opcion.addEventListener('click', (e) => {
		e.preventDefault();
		contenidoSelect.innerHTML = e.currentTarget.innerHTML;
		select.classList.toggle('active');
		opciones.classList.toggle('active');
		hiddenInput.value = e.currentTarget.querySelector('.titulo').innerText;
	});
});

select.addEventListener('click', () => {
	select.classList.toggle('active');
	opciones.classList.toggle('active');
});

This is all I can tell you, I have nothing else! since the program for the ESP is only the configuration to load the server, read the data from the flash and wifi configuration, that everything works correctly.

As I indicated in the question, what I need is to "extract the data" selected and store it in a variable to give it another use in the ESP program.

Thanks for everything!

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.