1

I want to create a page that displays a message when the user gives input. But the moment I click on the button to display the message the page instantly reloads and clears out the page:

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Fibonacci Series</title>
</head>

<body>
    <form onsubmit="return getFibonacci()">
        <table>
            <tr>
                <td>Enter the number to get a fibonacci</td>
                <td><input type="number" id="fibo" name="fibo" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td>
            </tr>
        </table>
        <div id="result"></div>
    </form>
    <script src="script.js"></script>
</body>

</html>

JavaScript Code:

function getFibonacci() {
    try {
        var num = document.getElementById("fibo").value;
        var fib0 = 0;
        var fib1 = 1;
        var next;
        const fib = [];
        for (var i = 0; i < num - 1; i++) {
            next = fib0 + fib1;
            fib0 = fib1;
            fib1 = next;
            fib.push(fib0)
            document.getElementById("result").innerHTML = fib;
        }
    }
    catch (err) {
        document.getElementById("result").innerHTML = err;
    }
}
Gautam Nag
  • 48
  • 6
  • Because that’s what form submission does by default. You’re not returning anything in `getFibonacci`, particularly not `false`. Please see [`preventDefault`](//developer.mozilla.org/en/docs/Web/API/Event/preventDefault). Inline event handlers like `onsubmit` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Mar 30 '22 at 04:34
  • What else do you expect from a submit button? Maybe a `type="button"` would be closer to the behavior you expect... – Louys Patrice Bessette Mar 30 '22 at 04:34

2 Answers2

0

Prevent that by adding event.preventDefault. Also you need to convert the value of the input to number which is done by adding unary operator +document.getElementById("fibo").value;. You can also use parseInt

function getFibonacci(event) {
  event.preventDefault()
  try {
    var num = +document.getElementById("fibo").value;
    var fib0 = 0;
    var fib1 = 1;
    var next;
    const fib = [];
    for (var i = 0; i < num - 1; i++) {
      next = fib0 + fib1;
      fib0 = fib1;
      fib1 = next;
      fib.push(fib0)
      document.getElementById("result").innerHTML = fib;
    }
  } catch (err) {
    document.getElementById("result").innerHTML = err;
  }
}
<form onsubmit="return getFibonacci(event)">
  <table>
    <tr>
      <td>Enter the number to get a fibonacci</td>
      <td><input type="number" id="fibo" name="fibo" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td>
    </tr>
  </table>
  <div id="result"></div>
</form>
brk
  • 48,835
  • 10
  • 56
  • 78
  • This relies on [`window.event`](//developer.mozilla.org/en/docs/Web/API/Window/event) which is deprecated. – Sebastian Simon Mar 30 '22 at 04:40
  • 1
    Why is a downvote not appropriate here? Nobody should use this particular solution or this particular quick fix. Inline event attributes, which this mutually depends on, should never be suggested or encouraged. The suggested fix is not a useful one. That’s an appropriate use case for a downvote and it’s perfectly okay to express these concerns with one. – Sebastian Simon Mar 30 '22 at 04:44
-1

It is reloading because the default behaviour of submit handlers is to reload the page. To avoid this we have stop this by using event.preventDefault().

Try the below changes:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Fibonacci Series</title>
</head>

<body>
    <form onsubmit="return getFibonacci(event)">
        <table>
            <tr>
                <td>Enter the number to get a fibonacci</td>
                <td><input type="number" id="fibo" name="fibo" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td>
            </tr>
        </table>
        <div id="result"></div>
    </form>
    <script src="script.js"></script>
</body>

</html>

function getFibonacci(event) {
event.preventDefault()
    try {
        var num = document.getElementById("fibo").value;
        var fib0 = 0;
        var fib1 = 1;
        var next;
        const fib = [];
        for (var i = 0; i < num - 1; i++) {
            next = fib0 + fib1;
            fib0 = fib1;
            fib1 = next;
            fib.push(fib0)
            document.getElementById("result").innerHTML = fib;
        }
    }
    catch (err) {
        document.getElementById("result").innerHTML = err;
    }
}
Visual Geckos
  • 1
  • 1