button change jquery javascript

Question

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/

Erik Philips · Accepted Answer · 2019-12-02 05:55:43Z

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/>

Great answer to the question the OP probably wishes they had asked. Thanks for the supplemental reading materials.

Saransh Kataria · Accepted Answer · 2019-12-02 05:22:31Z

1

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.

answered Dec 2, 2019 at 5:22

Saransh Kataria

1,50712 silver badges19 bronze badges

Comments

Devsi Odedra · Accepted Answer · 2019-12-02 06:03:21Z

1

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>

edited Dec 2, 2019 at 6:03

answered Dec 2, 2019 at 5:24

Devsi Odedra

5,3421 gold badge25 silver badges38 bronze badges

1 Comment

Jed Jamir Over a year ago

if i press the remove button how can it go back to "add to your stay" button? any idea?

Cat · Accepted Answer · 2019-12-02 06:07:24Z

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>

ChandanKr · Accepted Answer · 2019-12-02 05:43:29Z

-1

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

});

edited Dec 2, 2019 at 5:43

answered Dec 2, 2019 at 5:22

ChandanKr

747 bronze badges

9 Comments

Tibrogargan Over a year ago

Code only answers are usually not helpful. Please add some commentary to point out what the issue was, and what you did to fix it.

ChandanKr Over a year ago

Sure thank you i will try from next time. Really appreciated.

Jed Jamir Over a year ago

and if i press the remove button how can it go back to "add to your stay" button?

ChandanKr Over a year ago

Then onclick of remove again show the addons button. its upon you how to show your buttton.

ChandanKr Over a year ago

Check the above code now i have edited how you wanted.

|

Collectives™ on Stack Overflow

button change jquery javascript

5 Answers 5

1 Comment

Comments

1 Comment

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related