Changing button span through jQuery

Asked

Viewed 230 times

1

I have a button that at the click of it directs to a request in ajax to an external file that adds a product, however this does not matter much in this case. I wanted to manipulate what is written in span button. Every time the user clicked on buy, it would change to remove. And, the reverse would happen too, every time the user clicked the remove button, the span of that button would change to buy. What I managed to do was that the span of the button clicked change to remove, but the reverse has not yet.

Button code:

 <button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem"><span><span>Comprar</span></span></button>

Code of the Ajax request:

function addCartao(product_id) {
  $j.ajax({
    type: "POST",
    url: "teste.php",
    data: {
      product_id: product_id
    },
    dataType: 'json',
    cache: false,
    beforeSend: function() {

    },
    success: function(retorno) {
      $j('button[name=cartaoMensagem' + product_id + ']').html('Remover'); //Código que consegui fazer

    },
    complete: function() {

    },
    error: function(x, y, z) {
      alert("error");
      alert(x);
      alert(y);
      alert(z);
    }
  });
}
javascript jquery html

  • Do you want to change only the text? And the button function?

  • Yeah, that’s right.

3 answers

2

A more elegant and short way to do this:

success: function(retorno) {
  i = $j("#cartaoMensagem"+product_id);
  i.text() == "Comprar" ?
  ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao b*texto grifado*utton").not(i).attr('disabled','disabled') )
  :
  ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );
},

Test below:

var $j = jQuery.noConflict();
function addCartao(product_id){
	i = $j("#cartaoMensagem"+product_id);
	i.text() == "Comprar" ? ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled') ) : ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cartao">
<button type="button" class="button btn-cart" onclick="addCartao(1)" id="cartaoMensagem1"><span><span>Comprar</span></span></button>
<br>
<button type="button" class="button btn-cart" onclick="addCartao(2)" id="cartaoMensagem2"><span><span>Comprar</span></span></button>
<br>
<button type="button" class="button btn-cart" onclick="addCartao(3)" id="cartaoMensagem3"><span><span>Comprar</span></span></button>
</div>

1

$('span').on('click', function(){
   if($(this).attr('data-value') == 1){
      $(this).attr('data-value', 2)
      $(this).text('Remover')
   }else{
      $(this).attr('data-value', 1)
      $(this).text('Comprar')
   }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-value="1">Comprar</span>

There are several ways to do this, in which case I worked with attr and checked the value, swapped the text and the value of it every click.

1


When using the html all content is replaced, so you should re-place the span´s.

success: function(retorno) {
      var button = $j('button[name=cartaoMensagem' + product_id + ']');

      if($j(button).text() == '<span><span>Comprar</span></span>'){
              $j(button).html('<span><span>Remover</span></span>');
      }else{
              $j(button).html('<span><span>Comprar</span></span>');
      }


    },

  • It worked, thank you!

  • I am in need of another help, in case I have more than one buy button and I wanted every time a buy button was clicked the others were disabled and at the click of the remove button all were enabled again. The code I made, I put it in if and the other buy buttons are disabled.But when I click the remove button, I can’t do anything because the button is still disabled. Code I made: $j('#cartao').find(':button').prop('disabled',true);. Note: #card is the div where the buttons are.

  • Make an issue in the question with this question, because here it becomes very difficult to understand. By the way, you can open a new question too, anything sends the link, when possible I will answer.

  • Alright! Felipe here is the link of the question with that I told you in the comment and I thank you for all the help provided! https://answall.com/questions/233618/mudando-fun%C3%A7%C3%A3o-do-bot%C3%A3o-via-jquery

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.