Jquery Submit is causing a serious issue while processing the callback function

I’ve made program via which I am trying to create grids after taking value for number of boxes in rows and columns. When I submit the form by clicking on submit button; I’m unable to view effects as they disappear in seconds.

Now when I handle the same event using click event handler I am able to see all my effects. Why submit event handler is failing while click event handler is becoming a success? What is logic behind the disappearance of my output in seconds after pressing submit button whereas on the other hand the same output is visible for a long time when I am using the click event handler?

required output is given by below script ->

    $(()=>{

        function grid(row, col){

            for(let i=1; i<=(row*col); ++i)
                $('.Grid').append($('<div></div>').addClass("Tile"));
        }

        $('button').click(()=>{
        
          $('.Grid').width($('#a').val() * 40); 
          $('.Grid').height($('#b').val() * 40); 

          grid($('#a').val(), $('#b').val());

        });

    });

    .Grid{
        font-size: 0px;
        border: 2px solid blue;
    }

    .Tile{
        height: 40px;
        width: 40px;
        border-radius: 6px;
        background-color: grey;
        display: inline-block;
    }
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="Grid"></div>

        <button>Display!</button>

        <form>
        columns -> <input id="a" type="number"> <br/>
      rows -> <input id="b" type="number"> <br/>
        </form>

momentary(not required) output is given by below script ->

    $(()=>{

        function grid(row, col){

            for(let i=1; i<=(row*col); ++i)
                $('.Grid').append($('<div></div>').addClass("Tile"));
        }

        $('form').submit(()=>{
        
          $('.Grid').width($('#a').val() * 40); 
          $('.Grid').height($('#b').val() * 40); 

          grid($('#a').val(), $('#b').val());

        });

    });

    .Grid{
        font-size: 0px;
        border: 2px solid blue;
    }

    .Tile{
        height: 40px;
        width: 40px;
        border-radius: 6px;
        background-color: grey;
        display: inline-block;
    }
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="Grid"></div>

        <form>
        columns -> <input id="a" type="number"> <br/>
      rows -> <input id="b" type="number"> <br/>
      <input type="submit" value="submit">
        </form>

Answer

When you submit a form, browsers will perform a full page reload as they attempt to “submit” the data, usually to the location specified in the form’s action attribute. This is 100% expected behaviour.

You can prevent this default behaviour by intercepting the event when the form is submitted. In your code, when you add the submit handler, you have access to the underlying event and a function called preventDefault().

When you call this, the event is stopped. Here’s a more in-depth explanation of how it all works: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

And I’ve updated your code snippet below with a working example:

$(() => {

  function grid(row, col) {
    for (let i = 1; i <= (row * col); ++i)
      $('.Grid').append($('<div></div>').addClass("Tile"));
  }

  $('form').submit((event) => {
    
    event.preventDefault();
    
    $('.Grid').width($('#a').val() * 40);
    $('.Grid').height($('#b').val() * 40);

    grid($('#a').val(), $('#b').val());

  });

});

.Grid {
  font-size: 0px;
  border: 2px solid blue;
}

.Tile {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  background-color: grey;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Grid"></div>
<form>
  columns -> <input id="a" type="number" /> <br/> rows -> <input id="b" type="number" /> <br/>
  <input type="submit" value="submit" />
</form>