How to use onready function?

Forum|Forum|5 years ago
April 9, 2021
3 replies
1218 views

I have a serach bar of type submit and then a search button. I'm using button to call a function say fun() to invoke jQuery and use the json data to display on screen. Now whenever I click on submit button the whole page gets refreshed and my data of jQuery gets lost. To resolve it I'm using ready function and using the function fun() of submit button inside it but still the page gets refreshed and my Jquery is not getting executed. How can it be resolved?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by BrianKasingli

By default, when you click on a <form> field with a <input type="submit">, by default, the webpage will try to make a request to the currentURL, and since it is the currentURL your page will refresh. To remove the default behavior of the input type = "submit", you would need to add some JavaScript to the button that is something called preventDefault.

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

// https://jsfiddle.net/5f6n9wL1/2/
<form>
 <input type="submit" id="submit">
</form>

<script>


  // VanillaJS + DOMContentLoaded
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('submit').addEventListener('click', function(event){
      event.preventDefault();
      alert('run business logic Vanilla');
    });
  });


  //Jquery + DOMContentLoaded
  $(function() {
      $('#submit').on('click', function(event){
      event.preventDefault();
      alert('run business logic Jquery');
    });
  });
</script>

BrianKasingliAccepted solution

New Participant

By default, when you click on a <form> field with a <input type="submit">, by default, the webpage will try to make a request to the currentURL, and since it is the currentURL your page will refresh. To remove the default behavior of the input type = "submit", you would need to add some JavaScript to the button that is something called preventDefault.

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

// https://jsfiddle.net/5f6n9wL1/2/
<form>
 <input type="submit" id="submit">
</form>

<script>


  // VanillaJS + DOMContentLoaded
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('submit').addEventListener('click', function(event){
      event.preventDefault();
      alert('run business logic Vanilla');
    });
  });


  //Jquery + DOMContentLoaded
  $(function() {
      $('#submit').on('click', function(event){
      event.preventDefault();
      alert('run business logic Jquery');
    });
  });
</script>

Anudeep_Garnepudi

New Participant

@shagunmalik

Can you share HTML and JavaScript for better understanding.

If my assumption is correct, here you don't need a submit button . Have a normal button and on click of that button get input field value and do an AJAX call. This way user will be on same page and you can use existing variables/data and get search response data.

Asutosh_Jena_

New Participant

Hi @shagunmalik

You can use something like below:

Sample HTML:
<form id="target" action="something">
    <input type="text" value="Hi">
    <input type="submit" value="Submit">
</form>

JS:
$(document).ready(function () {
    $("#target").submit(function (e) {
        e.preventDefault(); // This will prevent the default form submission and stop the reloading of the page.
        fun(); // call whatever function from here
    });
});

Thanks!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded