Aquí está el HTML que tengo actualmente:
<div class="location"> <div class="first-line"> <i id="Icon1" class="fas fa-map-marker"></i> <input class="location-input" placeholder="Miejscowość lub kod pocztowy"> <div class="vertical-line"></div> <p class="gps-button"><i id="Icon2" class="fas fa-map-marker"></i></p> </div> <div class="second-line"> <input class="zakres-input" placeholder="Promień wyszukiwań (km)"> </div> <button class="fm-button" type="submit">Znajdz Mecz</button> </div> Lo que quiero hacer es obtener valores de ambas entradas. Tengo que enviarlos más tarde a mi backend usando FetchApi. Soy bastante nuevo en JavaScript y realmente no sé cómo manejarlo (sé cómo usar fetch , pero no cómo obtener las entradas). ¿Es posible que un botón envíe esto, o tengo que obtener estos datos por separado de las entradas? Esto es lo que traté de hacer:
const search1 = document.querySelector('input[placeholder="Miejscowość lub kod pocztowy"]'); const search2 = document.querySelector('input[placeholder="Promień wyszukiwań (km)"]'); const button = document.querySelector('button[class="fm-button"]'); button.addEventListener("click", function(){ const data1 = {search1: this.value}; const data2 = {search2: this.value}; //alert("data1"); //console.log(data1); });Dentro de un controlador de eventos DOM, this se refiere al objeto DOM que activó el evento. En su caso, ese es el button , por lo que al intentar obtener this.value , obtiene el valor del button , no los elementos de input .
Además, debido a que está almacenando los value en los object , necesita acceder a la propiedad del objeto que tiene los datos.
const search1 = document.querySelector('input[placeholder="Miejscowość lub kod pocztowy"]'); const search2 = document.querySelector('input[placeholder="Promień wyszukiwań (km)"]'); const button = document.querySelector('button[class="fm-button"]'); button.addEventListener("click", function(){ // Don't get "this".value (which is the button) // Get the value from the DOM objects (the input elements) const data1 = {search1: search1.value}; const data2 = {search2: search2.value}; // Access the data via the object property you stored it in console.log(data1.search1, data2.search2); }); <div class="location"> <div class="first-line"> <i id="Icon1" class="fas fa-map-marker"></i> <input class="location-input" placeholder="Miejscowość lub kod pocztowy"> <div class="vertical-line"></div> <p class="gps-button"><i id="Icon2" class="fas fa-map-marker"></i></p> </div> <div class="second-line"> <input class="zakres-input" placeholder="Promień wyszukiwań (km)"> </div> <button class="fm-button" type="submit">Znajdz Mecz</button> </div>Puede obtener el valor de un elemento de entrada accediendo a su atributo de value .
Así que en este caso search1.value y search2.value
const search1 = document.querySelector('input[placeholder="Miejscowość lub kod pocztowy"]'); const search2 = document.querySelector('input[placeholder="Promień wyszukiwań (km)"]'); const button = document.querySelector('button[class="fm-button"]'); button.addEventListener("click", function(){ //Don't run anything if any of the values are undefined if(!search1.value || !search2.value) return //Now we collect our data const data = {data1: search1.value, data2: search2.value} //Then we can send out a post request example with axios, //but any method of sending requests will work axios.post("https://placeholder.com/myendpoint", data) .then((res) =>{ //Log the response console.log(res.data) }) .catch((err) =>{ //Throw error if there's an error if(err) throw err }) });Seguro que recomendaría axios sobre fetchApi.