如何将 HTML 表单链接到 JavaScript 中的函数？答案

【问题标题】：How do you link an HTML form to a function in JavaScript?如何将 HTML 表单链接到 JavaScript 中的函数？
【发布时间】：2023-04-02 09:28:01
【问题描述】：

我必须用摄氏（C）和华氏（F）进行计算，我认为表格动作线是错误的。我该如何解决？

这是我的 HTML：

<form action="javascript.html">
    Convert Celsius to Fahrenheit:<br>
    <input type="text" name="converterCtoF"><br>
    <input type="submit" value="Submit">
</form>

这是我的 JavaScript 代码：

function tempertureConverter(C) {
    return (9/5)*C + 32;
}

另外一种方式呢？将 F 转换为 C。

【问题讨论】：

您可能想查看解决方案：stackoverflow.com/questions/133925/…

标签： javascript html forms function

【解决方案1】：

您应该使用表单发布到不同的文件，但是由于您没有指定要发布到的页面的标记，因此这里有一个解决方案，可以在当前页面上显示华氏温度。

<script>
    function tempertureConverter(){
        var C = document.getElementById("degree").value;
        alert((9/5)*C+32);
    }
</script>

<form>
    Convert Celsius to Fahrenheit:<br>
    <input type="text" name="converterCtoF" id = "degree"><br>
    <input type="button" value="Submit" id = "submit"
           onClick = "tempertureConverter()">
</form>

上面获取用户输入的摄氏度值并在其上运行转换函数。然后结果会在浏览器中显示为弹出窗口。

一个工作示例是here。

【讨论】：

【解决方案2】：

这是jfiddle 你的想法吗？它监听表单提交并从摄氏文本字段计算华氏温度。这将全部在一个页面上。

HTML：

<form name="temperature_form" action="">
    Convert Celsius to Fahrenheit:<br>
    <input type="text" name="converterCtoF" id="converterCtoF"><br>
    <input type="submit" value="Submit">
</form>

JavaScript：

document.forms["temperature_form"].onsubmit = function(){
    var c = document.getElementById("converterCtoF").value;
    var f = (9/5)*c + 32;
    alert(f);
    return false;
}

【讨论】：

【解决方案3】：

我认为您想将表单操作设置为您的 PHP 脚本，而不是 JavaScript。

<form action="celsius.php" method="get">
    Convert Celsius to Fahrenheit:<br>
    <input type="text" name="converterCtoF"><br>
    <input type="submit" value="Submit">
</form>

然后在 celsius.php 中您可以通过 $_GET['converterCtoF'] 访问文本字段值。

【讨论】：

如何更改为 PHP 脚本？
但这是一个普通的表单提交，往返于服务器。为什么不能全部在客户端运行（在 JavaScript 中）？

【解决方案4】：

您不会更改 PHP 脚本。您需要创建一个。在上面的这个例子中......

<form action="celsius.php" method="get">
    Convert Celsius to Fahrenheit:<br>
    <input type="text" name="converterCtoF"><br>
    <input type="submit" value="Submit">
</form>

您需要创建一个名为 celcius.php 的文件并添加类似以下内容：

<?php
  $c = $_GET['converterCtoF'];
  $f = convertTemp(c);

  echo(f);

  function convertTemp(temp) {
    return (9/5)*C + 32;
  }
?>

【讨论】：