Here is the HTML I currently have:
<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>
What I want to do is to get values from both inputs. I have to send them later to my backend using the FetchApi.
I am pretty new to JavaScript and don't really know how to handle it ( I know how to use fetch, but not how to get the inputs ). Is it even possible that one button will submit this, or do I have to get this data separately from the inputs. Here is what I tried to do:
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);
});
Inside of a DOM event handler, this refers to the DOM object that fired the event. In your case, that's the button, so trying to get this.value, gets the button value, not the input elements.
Also, because you're storing the values in objects, you need to access the property of the object that has the data.
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>You can get the value from an input element by accessing its value attribute.
So in this case search1.value and 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
})
});
I'd for sure recommend axios over the fetchApi.