How to use onready function?

Avatar

Avatar
Validate 1
Level 1
ShagunMalik
Level 1

Like

1 like

Total Posts

55 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
Ignite 1
Give Back
View profile

Avatar
Validate 1
Level 1
ShagunMalik
Level 1

Like

1 like

Total Posts

55 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
Ignite 1
Give Back
View profile
ShagunMalik
Level 1

09-04-2021

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

09-04-2021

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>

 

 

 

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

09-04-2021

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

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

09-04-2021

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!