CODEWITHSUNDEEP
javascriptjquery
Jed Jamir
Jed Jamir

Reputation: 77

button change jquery javascript

Is there a way to change my button to "remove" if i clicked the "add to stay button" Like when i click the add button it will load the data then it will be changed to remove button because it is already added. and if i press the remove button how can it go back to "add to your stay" button? Here is my js code and My button code 

$(document).ready(function() {
  $(".addons").on("click", function(event) {
    event.preventDefault();
    var id = $(this).data('addon-id');
    console.log(id);

    if (id != '') {
      $.ajax({
        type: "POST",
        url: "Pages/addonajax",
        data: {
          id: id
        },
        success: function(data) {
          console.dir(data);
          if (data) {
            result = JSON.parse(data);
            $("#test4>span").html(result[0]['name']);
            $("#test5>span").html(result[0]['price']);
            $("#test2>span").append(result[0]['price']);
          } else {
            $('#test1').append('no records found');
          }
        }
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="bookingroom">Total: PHP 2,750.00</h3>
<h5 class="addon-taxes2">Including Taxes & Fees</h5>
<button class="addons addon-btn trans_200">ADD TO MY STAY</button>

here's the example fiddle https://jsfiddle.net/j501fwb8/1/

Upvotes: 0

Views: 85

Answers (5)

Cat
Cat

Reputation: 4226

You can use a class to mark the button once it has been used to add the item. Wrapping the execution code inside an if/else block lets you check whether the class exists so you can act accordingly.

See the comments in this suggested code:

$(document).ready(function() {
  $(".addons").on("click", function(event) {
    event.preventDefault();
    var id = $(this).data('addon-id');
    console.log(id);
      if (id != ''){

        // Tests which type of button this is (see below)
        if(!this.classList.contains("isRemoveButton")){
      
          /* Your ajax call for adding goes here */

          // Changes the button text
          $(this).text("REMOVE");

          // Adds a class indicating which type of button this is
          this.classList.add("isRemoveButton");

        } else {

          /* Different ajax call for removing goes here */

          // Restores original button text
          $(this).text("ADD TO MY STAY");

          // Restores original classList state
          this.classList.remove("isRemoveButton");
        }
      }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="bookingroom">Total: PHP 2,750.00</h3>
<h5 class="addon-taxes2">Including Taxes & Fees</h5>
<button class="addons addon-btn trans_200" data-addon-id="1">ADD TO MY STAY</button>

Upvotes: 1

Devsi Odedra
Devsi Odedra

Reputation: 5322

You can change text after ajax call and load data, also you can add class for remove process etc.

Note: here i remove your ajax call, just put .text() on ajax success when load data

$(document).ready(function(){
	$(".addons").on("click", function(event) {
	
    var _t = $(this);
    if(_t.hasClass('remove')){
      _t.removeClass('remove').text('ADD TO MY STAY');
    } else {
      _t.addClass('remove').text('Remove');
    }

  

});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class = "bookingroom">Total: PHP 2,750.00</h3>
      <h5 class = "addon-taxes2">Including Taxes & Fees</h5>
      <button class="addons addon-btn trans_200">ADD TO MY STAY</button>

Upvotes: 1

Erik Philips
Erik Philips

Reputation: 54628

It's much harder to maintain a single element that has to do multiple things based on some criteria. Instead I highly suggest using multiple elements with a Single Responsibility.

I'd also HIGHLY recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton (Engineer @ Google)

My example would be something like:

$(document).ready(function() {
  $('.js-btn-addon').on('click', function() {
    var $this = $(this);
    /// do whatever
    var addonId = $this.data('addon-id');
    $this.addClass('is-hidden');
    $('.js-btn-remove[data-addon-id="' + addonId + '"]').removeClass('is-hidden');
  });
  $('.js-btn-remove').on('click', function() {
    var $this = $(this);
    /// do whatever
    var addonId = $this.data('addon-id');
    $this.addClass('is-hidden');
    $('.js-btn-addon[data-addon-id="' + addonId + '"]').removeClass('is-hidden');
  });
});
.is-hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "1">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "1">Remove</button>
<br/>

<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "2">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "2">Remove</button>
<br/>

<button class="addons addon-btn js-btn-addon trans_200" data-addon-id = "3">ADD TO MY STAY</button>
<button class="addons addon-btn js-btn-remove is-hidden trans_200" data-addon-id = "3">Remove</button>
<br/>

Upvotes: 2

ChandanKr
ChandanKr

Reputation: 74

$(document).ready(function(){
	$(".addons").on("click", function(event) {
			event.preventDefault();
			var id = $(this).data('addon-id');
			console.log(id);

		if(id != '')

				{
								$.ajax(
						{
								type:"POST",
								url : "Pages/addonajax",
								data:{id:id},


								success:function(data)
								{
										console.dir(data);
										if (data) {


										result = JSON.parse(data);

										$("#test4>span").html(result[0]['name']);
										$("#test5>span").html(result[0]['price']);
										$("#test2>span").append(result[0]['price']);
										}
										else {
													$('#test1').append('no records found');
										}


								}
						});
				}

		$(this).hide();
		$('.remove').show();
		//and write a remove property which you want.
	});

	$('.remove').on("click", function(){
		//write your property here for remove once.
		$(".addons").show();
		$(this).hide();
	})

});

Upvotes: -1

Saransh Kataria
Saransh Kataria

Reputation: 1497

You can change the HTML of the element to say Remove by using:

$(".addons").html('Remove');

You will have to handle the onClick method functionality accordingly though. Or you can remove the button altogether and show a different one.

Upvotes: 1

Related Questions