Avoid a link to reload the page in Javascript

Question

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 :(

https://html.spec.whatwg.org/multipage/indices.html#attributes-3 the type on a link is expected to be a mime type, not "button" or the likes which is valid for an field. — Taplar, Jul 24 '18 at 18:49
Whats about [avoid form action](https://stackoverflow.com/questions/1818249/form-with-no-action-and-where-enter-does-not-reload-page) — SerCrAsH, Jul 24 '18 at 18:52

score 2 · Answer 1 · answered Jul 24 '18 at 18:50

2

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()
})

answered Jul 24 '18 at 18:50

WebD

615
1
4
15

Thank you very much, for your fast reply :) But could you please look on my edited question for input and send me the whole code with input tag and script tag? Thank you very much :) – Tester2 Jul 26 '18 at 15:50

Mohammad · Answer 2 · 2018-07-26T17:03:21.897

1

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.

edited Jul 26 '18 at 17:03

answered Jul 24 '18 at 18:49

Mohammad

1,549
1
15
27

Explanation is unsufficient. Could you please look on my edited question for input and send me the whole code with input tag and script tag? Thank you very much :) – Tester2 Jul 26 '18 at 15:48
sure i'll do, yw , may you please type the function which your buttons call – Mohammad Jul 26 '18 at 16:53

score 1 · Answer 3 · answered Jul 24 '18 at 19:04

1

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

answered Jul 24 '18 at 19:04

Narendra Sharma

116
7

Thank you very much, but as I didn't ask for an alert this doesn't solve my problem :( – Tester2 Jul 26 '18 at 15:42

score 0 · Answer 4 · answered Jul 24 '18 at 19:03

0

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>

answered Jul 24 '18 at 19:03

Unmitigated

76,500
11
62
80

Could you please look on my edited question for input and send me the whole code with input tag and script tag? Thank you very much :) – Tester2 Jul 26 '18 at 15:49
@Tester2 What do you want? Please explain. – Unmitigated Jul 26 '18 at 20:20
Hi, well I previously found this (the accepted solution) https://stackoverflow.com/questions/8866053/stop-reloading-page-with-enter-key, but I don't know how to embed the JsFiddle stuff. In the script tag? Thanks very much – Tester2 Jul 29 '18 at 15:08
@Tester2 Check this JSFiddle: http://jsfiddle.net/5m4y2boq/3/ Is it what you want? – Unmitigated Jul 29 '18 at 15:34

score 0 · Accepted Answer · answered Jul 29 '18 at 15:23

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 :)

Avoid a link to reload the page in Javascript

5 Answers5