如何在 getLink function 中使用来自 html 表单的输入？

Question

So this is my first question, and it's also the first code I'm trying to write.

I basically want to make a form to collect values like the Departing Airport Code. An input for the Departing Airport Code would look like 'ams'.

This value is needed to customize the URL which the getLink function opens in a new tab.

I've read other questions and tried a lot of things. But the input doesn't appear in the URL that gets opened in the new tab.

In this example, I'm trying to get the input with '+dairport+' placed in the getLink URL.

How can I get the input data from the form and use it in the URL that gets opened when I click the button?

 document.getElementById("dairport").value = "dairport"; function getLink(dairport) { window.open("https://www.skyscanner.nl/transport/flights/+dairport+/jfk/210701/210714/?adults=1&adultsv2=1&cabinclass=business&children=0&childrenv2=&destinationentityid=27537542&inboundaltsenabled=false&infants=0&originentityid=27536561&outboundaltsenabled=false&preferdirects=false&preferflexible=false&ref=home&rtn=1"); }

 <form name="box"> <label for="dairport">Departing Airport Code:</label><br> <input type="text" id="dairport" name="dairport"><br> <label for="aairport">Arriving Airport Code:</label><br> <input type="text" id="aairport" name="aairport"><br> <label for="ddate">Departing Date:</label><br> <input type="date" id="ddate" name="ddate"><br> <label for="adate">Arriving Date:</label><br> <input type="date" id="adate" name="adate"><br> <label for="class">Class:</label><br> <select id="class" name="class"><br> <option value="business">Business</option> <option value="first">First</option> </select><br> <button onclick="getLink(dairport);">Launch</button> </form>

Answer 1

document.getElementById("dairport").value = "dairport"; will set the value of the input with the id of dairport . What you want to do is get the value the user entered. That is just document.getElementById("dairport").value and should be inside your getLink() function.

You also don't really need a form since you aren't submitting any information to a server or similar.

Then you can use template literals to include the value of the departingAirport variable in the link to open. What you are doing is adding the literal string +airport+ in the URL which is no good, you need to put the value of the variable (which is what template literals help with).

 function getLink() { let departingAirport = document.getElementById("dairport").value; window.open(`https://www.skyscanner.nl/transport/flights/${departingAirport}/jfk/210701/210714/?adults=1&adultsv2=1&cabinclass=business&children=0&childrenv2=&destinationentityid=27537542&inboundaltsenabled=false&infants=0&originentityid=27536561&outboundaltsenabled=false&preferdirects=false&preferflexible=false&ref=home&rtn=1`); }

 <label for="dairport">Departing Airport Code:</label><br> <input type="text" id="dairport" name="dairport"><br> <label for="aairport">Arriving Airport Code:</label><br> <input type="text" id="aairport" name="aairport"><br> <label for="ddate">Departing Date:</label><br> <input type="date" id="ddate" name="ddate"><br> <label for="adate">Arriving Date:</label><br> <input type="date" id="adate" name="adate"><br> <label for="class">Class:</label><br> <select id="class" name="class"><br> <option value="business">Business</option> <option value="first">First</option> </select><br> <button onclick="getLink();">Launch</button>

Answer 2

@andrew Lhor Thanks for the answer again! I tried 2 window.open s with 2 different Arriving Airports but it doesn't seem to work (only the first window is opening).

It now looks like this:

function getLink() {
                 
let departingAirport = document.getElementById("dairport").value;
let arrivingAirport = document.getElementById("aairport").value;
let arrivingAirport2 = document.getElementById("aairport2").value;
let classSeat = document.getElementById("class").value;
let departingDate = document.getElementById("ddate").value;
let arrivingDate = document.getElementById("adate").value;
             
             window.open(`https://www.skyscanner.nl/transport/flights/${departingAirport}/${arrivingAirport}/${departingDate}/${arrivingDate}/?adults=1&adultsv2=1&cabinclass=${classSeat}&children=0&childrenv2=&destinationentityid=27537542&inboundaltsenabled=false&infants=0&originentityid=27536561&outboundaltsenabled=false&preferdirects=false&preferflexible=false&ref=home&rtn=1`);
                          
             window.open(`https://www.skyscanner.nl/transport/flights/${departingAirport}/${arrivingAirport2}/${departingDate}/${arrivingDate}/?adults=1&adultsv2=1&cabinclass=${classSeat}&children=0&childrenv2=&destinationentityid=27537542&inboundaltsenabled=false&infants=0&originentityid=27536561&outboundaltsenabled=false&preferdirects=false&preferflexible=false&ref=home&rtn=1`);
             
}

And this:

<label for="dairport">Departing Airport:</label><br>
<input type="text" id="dairport" name="dairport"><br>

<label for="aairport">Arriving Airport:</label><br>
<input type="text" id="aairport" name="aairport"><br>

<label for="aairport2">Arriving Airport2:</label><br>
<input type="text" id="aairport2" name="aairport2"><br>
    
<label for="ddate">Departing Date:</label><br>
<input type="text" id="ddate" name="ddate"><br>

<label for="adate">Arriving Date:</label><br>
<input type="text" id="adate" name="adate"><br>

<label for="class">Class:</label><br>

<select id="class" name="class"><br>

  <option value="business">Business</option>
  <option value="first">First</option>

</select><br>

<button onclick="getLink();">Launch</button>