Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to use onready function?

ShagunMalik
Level 3
Level 3

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?

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

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>

 

 

 

View solution in original post

3 Replies
asutosh_jena
Community Advisor
Community Advisor

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
Community Advisor
Community Advisor

@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
Correct answer by
Community Advisor
Community Advisor

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>

 

 

 

View solution in original post