Why is the page instantly reloading on clicking the 'form-on submit' button?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

I found out what the mistake was. Removing the return from this statement and displaying the message while using an "inner HTML()" attribute worked for me.

<form onsubmit="return getFibonacci()">

CodePudding user response：

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