How to use onready function?

[ShagunMalik]

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?

[Asutosh_Jena_]

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! 

[Anudeep_Garnepudi]

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

[BrianKasingli · Accepted solution]

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>