How to send data from two inputs using button

Question

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);

});

Answer 1

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>