首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何将HTML表单信息传递给javascript?

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

Stack Overflow用户
提问于 2017-06-03 12:03:11
回答 3查看 43关注 0票数 0

好的,所以我正在处理一个按钮,点击它将显示来自RESTAPI的信息--所有这些都不需要刷新/重新加载页面。

它将如何工作: HTML调用javascript函数onClick -> javascript调用my并显示来自我API的给定信息。

现在,我的API需要一个“打赌”参数;它是一个整数。用户在HTML输入表单中提供这一点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        <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()"

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-06-03 12:09:18

您可以为输入标签提供id,并访问代码中输入的值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function prepareRoll(){
    var input = document.getElementById('betField')
    var bet = input.value;

    //Make API call
}

您可以使用jQuery库进行api调用,使用起来既快又简单。如果不想使用,那么您仍然可以使用XMLHttpRequest。

票数 1
EN

Stack Overflow用户

发布于 2017-06-03 12:06:04

您可以使用.previousElementSibling引用前一个元素,使用.value来获取元素.value

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2017-06-03 12:12:24

不要在函数调用中传递值,而是尝试获取函数中的值,如这里所示。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function prepareRoll(){
     var value=$("input type=['text']").val()
     //write the remaining code.


}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44348097

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文