avoid reloading the page when you press the button

Question

is precisely the problem when I click on the button the page is reloaded , the solution is to use preventDefault() but as' doing the input control is not performed correctly , or if the pattern is not satisfied does not appear any error

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
        //event.preventDefault();
        var use = $('#Username').val();
        var passwor = $('#Password').val();
        alert("Hi);
        // Ajax request here
     });
</script>

<div class="container">
  <div class="card"></div>
  <div class="card">
   <h1 class="title">Login</h1>
   <form>
   <div class="input-container">
    <input type="text" id="Username" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Username">Username</label>
    <div class="bar"></div>
   </div>
   <div class="input-container">
    <input type="password" id="Password" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Password">Password</label>
    <div class="bar"></div>
   </div>
   
   
   <div class="button-container">
    <button id="go" ><span>Login</span></button>
   </div>
  </form>
  </div>
 </div>

http://stackoverflow.com/questions/5404839/how-can-i-refresh-a-page-with-jquery — Richard Walton, Jan 04 '16 at 16:37
The title of your question is "reload the page when you click on the button". — Richard Walton, Jan 04 '16 at 16:49

Adam Azad · Answer 1 · 2016-01-04T16:53:25.733

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){
     $('#go').click(function(event) {
        // event.preventDefault();
        var use = $('#Username').val();
        var passwor = $('#Password').val();
        console.log(use, passwor);
     });
});
</script>
<div class="container">
  <div class="card"></div>
  <div class="card">
   <h1 class="title">Login</h1>
   <form>
   <div class="input-container">
    <input type="text" id="Username" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Username">Username</label>
    <div class="bar"></div>
   </div>
   <div class="input-container">
    <input type="password" id="Password" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Password">Password</label>
    <div class="bar"></div>
   </div>
   
   
   <div class="button-container">
    <button id="go" ><span>Login</span></button>
   </div>
  </form>
  </div>
 </div>

Wrong use of <script> tag, you need to either load the script content use src, and not both.

<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() { // wait for DOM to load
    $('#go').click(function(event) {
        //event.preventDefault();
        var use = $('#Username').val();
        var passwor = $('#Password').val();
        alert("Hi");
     });
});
<script>

You can either use ~~event.preventDefault() (recommended) or~~ add type="button" attribute to the #go button

<button id="go" type="button"><span>Login</span></button>

adding event.preventDefault ( ) if you leave the fields empty is not generated any error message , which is the case properly without it — Daniele, Jan 04 '16 at 16:49
Correct me if I am wrong, do you want to validate the form before doing the AJAX request? If yes, this drifts way from the question — Adam Azad, Jan 04 '16 at 16:51
Please check updated snippet, I guess it's what you're looking for — Adam Azad, Jan 04 '16 at 16:53

Ravi S. Singh · Accepted Answer · 2016-01-04T17:23:43.610

2

remove the src="jquery-1.11.3.min.js" and it should work. if you have to add jquery library give it a saperate scrip element.

<!DOCTYPE html>
<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
        <div class="card"></div>
        <div class="card">
            <h1 class="title">Login</h1>
            <form>
            <div class="input-container">
                <input type="text" id="Username" />
                <label for="Username">Username</label>
                <div class="bar"></div>
            </div>
            <div class="input-container">
                <input type="password" id="Password" />
                <label for="Password">Password</label>
                <div class="bar"></div>
            </div>


            <div class="button-container">
                <button id="go" ><span>Login</span></button>
            </div>
        </form>
        </div>
    </div>

    <script>
    $('#go').on('click',function(e){
      var username=$("#Username").val();
      var password=$('#Password').val();
      e.preventDefault();
      alert('Hi');
      //write ajax code here
    });
    </script>

<!-- language: lang-html -->


  </body>

</html>

hear is plunker link :- http://plnkr.co/edit/FmdXu6YixLjlaYerLHFa?p=preview

edited Jan 04 '16 at 17:23

answered Jan 04 '16 at 16:56

Ravi S. Singh

617
8
15

if you press on the button of the login page is reloaded – Daniele Jan 04 '16 at 17:03
of course, I tried it and the page is reloaded , in fact not even visualize the alert – Daniele Jan 04 '16 at 17:17
may be that time i failed to have saved the plunker edit. updated the code to load src from google cdn. check if it works now.. – Ravi S. Singh Jan 04 '16 at 17:23
It is always the same problem , or if the pattern is not respected not appear any error message , but if you take away preventDefault ( ) , the error message is displayed but the page is reloaded – Daniele Jan 04 '16 at 17:36
1

to respect the validation you should add code for submit event of form and not click event of button. updated the plunker for this. check if this solves now.. – Ravi S. Singh Jan 04 '16 at 17:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99715/discussion-between-ravi-s-singh-and-daniele-castronovo). – Ravi S. Singh Jan 04 '16 at 17:55
Thank you very much Ravi S. Singh , now works correctly – Daniele Jan 04 '16 at 18:04

score 1 · Answer 3 · answered Jan 04 '16 at 16:38

A script element can load a script from its text content or a URL specified by the src attribute, not both.

You are loading jQuery, but the content of the <script> never runs.

You need a separate <script> for each of your scripts.

Aside 1: You're generally better off using submit events on form elements than you are with click events on submit buttons.

Aside 2: Make sure your code runs after the HTML for the button is added to the DOM. Otherwise $('#go') won't match any elements.

I'm sorry I wrote it in a hurry , but my code is correct , I corrected the question. — Daniele, Jan 04 '16 at 16:44

score 0 · Answer 4 · answered Jan 04 '16 at 17:17

Try returning false at the end of the click event function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#go').click(function(event) {
        //event.preventDefault();
        var use = $('#Username').val();
        var passwor = $('#Password').val();
        alert("Hi);
        // Ajax request here
        
        //Return false to prevent refresh
        return false;
     });
</script>

<div class="container">
  <div class="card"></div>
  <div class="card">
   <h1 class="title">Login</h1>
   <form>
   <div class="input-container">
    <input type="text" id="Username" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Username">Username</label>
    <div class="bar"></div>
   </div>
   <div class="input-container">
    <input type="password" id="Password" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Password">Password</label>
    <div class="bar"></div>
   </div>
   
   
   <div class="button-container">
    <button id="go" ><span>Login</span></button>
   </div>
  </form>
  </div>
 </div>

if I insert return false , the behavior is the same as adding event.preventDefault ( ) , which does not show any error if the pattern is not respected — Daniele, Jan 04 '16 at 17:24

avoid reloading the page when you press the button

4 Answers4