How to send data from two inputs using button-CodePudding

Here is HTML i have.

<div >
   <div >
       <i id="Icon1" ></i>
       <input  placeholder="Miejscowość lub kod pocztowy">
       <div ></div>
       <p ><i id="Icon2" ></i></p>
   </div>
   <div >
       <input  placeholder="Promień wyszukiwań (km)">
   </div>
       <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 FetchApi. I am pretty new to JavaScript and dont really know how to handle it(PS do know FetchApi, dont know only how to get values from inputs). Is it even possible that one button wil submit this, or do i have to get this data seperatly (not in same time) from inputs, but how to add then one event listner to two inputs, so data would be send only when there would be "input" in both '`. 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[]');


button.addEventListener("click", function(){

    const data1 = {search1: this.value};
    const data2 = {search2: this.value};
    //alert("data1");
    //console.log(data1);

});

CodePudding user response：

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[]');


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.

CodePudding user response：

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[]');

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 >
   <div >
       <i id="Icon1" ></i>
       <input  placeholder="Miejscowość lub kod pocztowy">
       <div ></div>
       <p ><i id="Icon2" ></i></p>
   </div>
   <div >
       <input  placeholder="Promień wyszukiwań (km)">
   </div>
       <button  type="submit">Znajdz Mecz</button>
</div>