如何將 HTML 表單鏈接到 JavaScript 中的函數？

Question

我必須用攝氏（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。

Answer 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 。

Answer 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;
}

Answer 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'] 訪問文本字段值。

Answer 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;
  }
?>