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


}