如何将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. 


}