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

Question

所以这是我的第一个问题，也是我尝试编写的第一个代码。

我基本上想制作一个表格来收集诸如出发机场代码之类的值。 出发机场代码的输入看起来像“ams”。

需要此值来自定义 getLink function 在新选项卡中打开的 URL。

我已经阅读了其他问题并尝试了很多事情。 但是输入没有出现在新选项卡中打开的 URL 中。

在这个例子中，我试图在 getLink URL 中获取带有“+dairport+”的输入。

如何从表单中获取输入数据并在单击按钮时打开的 URL 中使用它？

 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"; 将使用dairport的 id 设置输入的值。 您要做的是获取用户输入的值。 这只是document.getElementById("dairport").value并且应该在您的getLink() function 中。

您也不需要form ，因为您没有向服务器或类似服务器提交任何信息。

然后，您可以使用模板文字在要打开的链接中包含departingAirport变量的值。 您正在做的是在 URL 中添加文字字符串+airport+这不好，您需要输入变量的值（这是模板文字的帮助）。

 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 再次感谢您的回答！ 我尝试了 2 个window.open和 2 个不同的到达机场，但它似乎不起作用（只有第一个 window 正在打开）。

现在看起来像这样：

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

和这个：

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