如何在 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>