如何将 HTML 表单信息传递给 javascript？

Question

好吧，所以我正在开发一个按钮，单击该按钮将显示来自我的 RESTAPI 的信息 - 所有这些都没有 refreshing/reloading 页面。

如何运作： HTML 按钮调用 javascript 函数 onClick -> javascript 调用我的 API 并显示来自我的 API.

的给定信息

现在，我的 API 需要一个 "bet" 参数；这是一个整数。用户以 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

可以使用.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 2

您可以为输入标签提供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 3

与其在函数调用中传递值，不如尝试像此处那样在函数中获取值。

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


}

如何将 HTML 表单信息传递给 javascript？

How can I pass HTML form information to javascript?

html

javascript

frontend

backend