How do you link an HTML form to a function in JavaScript?

Question

I have to make a calculation with Celsius (C) and Fahrenheit (F), and I think the form action line is wrong. How can I fix it?

Here is my HTML:

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

Here is my JavaScript code:

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

What about the other way as well? Converting F to C.

You might want to check the solution at: http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit?rq=1 — Joseandro Luiz, Nov 09 '13 at 20:50

score 3 · Accepted Answer · edited Jul 20 '20 at 15:49

You should be posting to a different file with your form, but since you didn't specify the mark-up for the page you are posting to, here is a solution that will display the Fahrenheit on the current page.

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

The above grabs the Celsius value the user inputs and runs the conversion function on it. The result is then displayed as a pop-up in the browser.

A working example is here.

score 2 · Answer 2 · edited Jul 20 '20 at 15:56

Is this jfiddle what you had in mind? It listens for the form submission and calculates the Fahrenheit from the Celsius text field. This would all be on one page.

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

score 0 · Answer 3 · edited Jul 20 '20 at 15:50

0

I think you want to set the form action to your PHP script, not JavaScript.

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

Then in celsius.php you can access to the text field value via $_GET['converterCtoF'].

edited Jul 20 '20 at 15:50

Peter Mortensen

30,738
21
105
131

answered Nov 09 '13 at 20:39

Srle

10,366
8
34
63

1

How do I change to PHP script? – HotSaucey Nov 09 '13 at 20:44
But this is a normal form submit, with a roundtrip to the server. Why can't it all run on the client side (in JavaScript)? – Peter Mortensen Jul 20 '20 at 15:53

score 0 · Answer 4 · edited Jul 20 '20 at 15:58

You would not change a PHP script. You need to create one. In this example above ...

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

You need to create a file named celcius.php and add something similar to:

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

  echo(f);

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

How do you link an HTML form to a function in JavaScript?

4 Answers4