如何將HTML表單信息傳遞給javascript？

Question

好的，所以我正在研究一個按鈕，單擊它時會顯示來自我的RESTAPI的信息 - 所有這些都不刷新/重新加載頁面。

它將如何工作： HTML按鈕調用JavaScript函數onClick - > javascript打電話給我的API並顯示來自我的API的給定信息。

現在，我的API需要一個「賭注」參數;這是一個整數。用戶以HTML輸入的形式提供。

 <form> 
      Bet<br> 
      <input onchange="checkBet" value="0.00001" type="text" name="bet"><br> 
      <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 
     </form> 

因此，假設在<input onchange="checkBet" value="0.00001" type="text" name="bet"><br>一些類型的用戶，我怎麼能傳遞給我的javascript函數"prepareRoll()"？

Answer 1

你可以給ID的輸入標籤並訪問在代碼中輸入的值。

<form> 
     Bet<br> 
     <input id="betField" onchange="checkBet" value="0.00001" type="text" name="bet"><br> 
     <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 
    </form> 

JS代碼

function prepareRoll(){ 
    var input = document.getElementById('betField') 
    var bet = input.value; 

    //Make API call 
} 

您可以使用jQuery庫進行API調用，它是快速，簡單易用。如果不想使用，那麼你仍然可以使用XMLHttpRequest。

Answer 2

您可以使用.previousElementSibling引用前一個元素，.value獲得元素.value

<button type="button" id="dicebutton" onclick="prepareRoll(`${this.previousElementSibling.name}=${this.previousElementSibling.value}`)" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 

Answer 3

而不是在函數調用中傳遞值嘗試獲取像這裏的函數中的值。

function prepareRoll(){ 
    var value=$("input type=['text']").val() 
    //write the remaining code. 


}