CODEWITHSUNDEEP
javascripthtmlbuttonreload
Tester2
Tester2

Reputation: 57

Avoid a link to reload the page in Javascript

I am having this button in an <a> tag (would like to keep it in an a tag). 

<center><a href="javascript:changePassword()" type="button" id="box_button" class="pw-button">Change Password</a></center>

The problem is that when I hit Enter the password gets changed, unfortunately the page reloads, which would be very annoying, when it comes to UX. So, how can I fix this?

EDIT:

Well, I figuered out, that the problem is not the button, but the input.

Here the code: 

<div id="login-box-field"><input type="password"  id="new_password" placeholder="Password: " class="form-login myLink" title="Password"  maxlength="20">
  
</div>

Well, some people say something about a Form and a JS script. Please, could you tell me, how to do that? Some other samples on the platform here didn't work :(

Upvotes: 0

Views: 5050

Answers (5)

Tester2
Tester2

Reputation: 57

everyone.

I've found the solution, which worked for me:

<input class="tableInput" type="text" value="Table input" onkeypress="return tableInputKeyPress(event)" />

<script type="text/javascript">
function tableInputKeyPress(e){
  e=e||window.event;
  var key = e.keyCode;
  if(key==13) //Enter
  {
     //do you task here...
     return true; //return true to submit, false to do nothing
  }
}
</script>

Again, thank you very much to everybody who posted his solution :)

Upvotes: 0

Mohammad
Mohammad

Reputation: 1577

you can use jquery prevent default action of a (if you don't want change your html) :

    $("a").click(function(event){
     event.preventDefault();
    });

Update : if clicking password input result is page refresh, then you need to edit that function which this input calls , so edit that function to return false.

Upvotes: 1

Narendra Sharma
Narendra Sharma

Reputation: 116

Replace anchor tag with button and add onclick() event then call the change passwaord method then it will work fine!

<div>
<center><button onclick="changePassword()" id="box_button" class="pw-button">Change Password</button></center></div>
<script>
function changePassword() {
alert("your code goes here")
}</script>

fiddle is here

Upvotes: 1

Unmitigated
Unmitigated

Reputation: 89204

You need to prevent the default action of the link with event.preventDefault(). To prevent the link from doing anything, you should omit the href attribute or give it a href of javascript:void(0) or equivalently javascript:; and use the onClick event handler to perform the logic.

<center><a href="javascript:;" onClick="changePassword(event)" type="button" id="box_button" class="pw-button">Change Password</a></center>
<script>
function changePassword(e){
e.preventDefault();
console.log("Changing password");
//other logic
}
</script>

Upvotes: 0

WebD
WebD

Reputation: 705

To prevent the reload of the page, you can use e.preventDefault() inside your function.

Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Example: My HTML:

<a href="https://google.com" class="myLink">Click me</a>

JS code:

var myLink = document.querySelector('.myLink')
myLink.addEventListener('click', function(e) {
  e.preventDefault()
})

Upvotes: 2

Related Questions