Avoid page refresh when pressing buttons

Question

Avoid page refresh when pressing buttons

Navigation

#1 by (1 votes)

1

Greetings, I'm looking for a way to avoid the refresh that my page makes when adding an element by pressing a button, either adding, subtracting or deleting an element. I would like you to stay in the same place and do not refresh the page since it takes me to the beginning and it is uncomfortable. My code is as follows:

These are the buttons that do the actions:

 <a href="#"><img onclick="add(<?php echo $id ?>,'add');" src="img/sumar.png"></a>

 <a href="#"><img onclick="add(<?php echo $id ?>,'remove');" src="img/resta.png"></a>

 <a href="#"><img onclick="add(<?php echo $id ?>,'removeProd');" src="img/remove.png"></a>

This is my JS:

 function add(valor,valor2){
  $.get('add.php',{id:valor,action:valor2},function(data){
    $('.producto').html(data);
  })
 }

 function add2(valor,valor2){
  $.get('add.php',{id:valor,action:valor2},function(data){
   window.location='';
  })

 }

 function add3(valor,valor2,valor3){
   $.get('add.php',{id:valor,action:valor2,su:valor3},function(data){
        $('.producto').html(data);
   })
 }

This is what I have, what I want is that by pressing any of the buttons I do not recharge the page, as it takes me to the top of the page again. Who can help me with this thank you very much, I do not know well js

javascript jquery

asked by Alejo Mendoza 23.01.2018 в 03:54

source

1 answer

project advanced calculation, android error: "java.lang.NullPointerException at java.lang.StringToReal.parseFloat (StringToReal.java:285)" Align divs using bootstrap

score 1 · Accepted Answer

As is your code to avoid the refresh you would have to make at least two changes, first return false in your functions, and also add the return within onclick before calling the function .

HTML

<a href="#"><img onclick="return add(<?php echo $id ?>,'add');" src="img/sumar.png"></a>

Js (same, return false to your other functions)

function add(valor,valor2){
  $.get('add.php',{id:valor,action:valor2},function(data){
    $('.producto').html(data);
  })
 return false;
}