如何让一个html表单启动一个函数

Posted

技术标签:

【中文标题】如何让一个html表单启动一个函数【英文标题】：How to make an html form start a function 【发布时间】：2014-04-08 10:45:31 【问题描述】：

我想知道是否有一种简单的方法可以使带有文本输入的表单按钮启动一个表单，该表单将检查答案是否正确，然后继续告诉您。这是我有的，你能告诉我我需要什么吗？

<!doctype html>
<body>
 <center>
  <form name="Input" action="Answer" method="get">
   <input type="text" name="Input">
   <input type="submit" value="submit">
  </form>
  <script type="text/javascript">
   var A = Math.floor(Math.random()*11);
   var B = Math.floor(Math.random()*11);
   var C = A+B;
   var Input = document.getElementById('Input');
   document.write(A + "+" + B)
   function Answer()
   
     alert("correct!!");
   
 </script>

</body>
</html>

【问题讨论】：

输入与正确答案有什么关系？只是想知道。 输入是我从代码中取出的 IF ELSE 部分的一部分，抱歉。它使用 if(input=C) alert("correct!!"); 检查 啊。这很有帮助。 【参考方案1】： 
function calculateAnswer()

var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A+B;
var Input = document.getElementById('Input');
if(Input.value == C)

document.body.innerHTML += (A + "+" + B);
//  Or another thing to do if the answer's correct

另外，在提交按钮上附加一个事件监听器，让它运行函数：

referenceToTheSubmitButton.addEventListener("click", calculateAnswer);

根据需要缩进。 享受！ :D

【讨论】：

我需要把“referencetothesubmitbutton”部分改成什么吗？ 是的。您需要将其更改为对提交按钮的引用，例如document.getElementById(submitId)。另外，您应该将name="Input" 更改为id="Input"，并在提交按钮中添加一个ID。 谢谢！尽管 document.write 不起作用，但我需要预先显示它才能看到计算答案所需的变量。此外，提交按钮会尝试将我发送到不同的页面，而不仅仅是激活该功能。 :P 非常欢迎。如果您需要事先获取变量，请在函数之前对其进行初始化，然后对它们进行您喜欢的操作。如果我解决了您的问题，您介意通过单击复选标记的轮廓将我的答案标记为已接受吗？谢谢！ 无论我把它放在哪里，文本都不会出现：document.write(A + "+" + B); P.S，谢谢你忍受我的笨拙！【参考方案2】：

我知道你没有使用 jQuery，但你在寻找 nature 的东西吗？

它可以很容易地更改为纯 javascript。我只是想使用bootstrap 来获得警报的简单视觉效果。

html 应该是这样的（使用 jQuery 和 bootstrap）：

<div class="alert alert-danger" id="correct">Your answer is currently 
    <span id="type"> INCORRECT </span>
</div>
<form>
    <input name="answer" id="answer">
</form>
<p>Hint: the answer is "correct"</p>

脚本会这样工作：

$("#answer").keyup(function()
if($(this).val() === "correct")
    $("#correct").removeClass("alert-danger")
    .addClass("alert-success");
    $("#type").text("CORRECT!")

else
    $("#correct").removeClass("alert-success")
    .addClass("alert-danger");
    $("#type").text("INCORRECT!")

).keyup();

这只是检查答案的输入的基本实现。在这种情况下，键入“正确”会使警报变为绿色。

【讨论】：

以上是关于如何让一个html表单启动一个函数的主要内容，如果未能解决你的问题，请参考以下文章

如何让 Django 表单显示 html 必需的属性？

如何让表单默认为浏览器样式

如何使 HTML 表单提交

如何将变量从外部 JavaScript 传递到 HTML 表单

如何让用户在 HTML5 网络表单中输入持续时间而不打扰他们？

您如何克服 HTML 表单嵌套限制？