Add a tick to button on result – Ajax

7th July 2016

Jquery - Ajax

On an ajax call, if your result is “Yes”, then it will swap classes and add a background of a tick in the button.
NTE: Not a fully working script.


<button type="button" class="btn-primary btn-lg btn-info addtodep" id="addtoyear">Add to Deposit</button>
<button type="button" class="btn-primary btn-lg btn-info addtomonth" id="addtomonth">Add to Monthly</button>

<button type="button" class="btn-primary btn-lg btn-info addtodep" id="addtoyear">Add to Deposit</button>

<button type="button" class="btn-primary btn-lg btn-info addtomonth" id="addtomonth">Add to Monthly</button>

After ajax post fromm the success part !


      success: function(data){
                            $(".paymentchoice").html(data);
                                 
            				        if (data == "Yearly") {
						$('#addtoyear').text("Added To Yearly")	
						$('#addtomonth').text("Add To Monthly")	
$('#addtomonth').removeClass('addtomonthnew');
$('#addtodep').addClass('addtodepnew');
 							}
							else {
								if (data=="Monthly") {
									$('#addtomonth').text("Added To Monthly")	
									$('#addtodep').text("Add To Yearly")	
$('#addtodep').removeClass('addtodepnew');
$('#addtomonth').addClass('addtomonthnew');
								
								}
							} 
                         }

success: function(data){

$(".paymentchoice").html(data);

if (data == "Yearly") {

$('#addtoyear').text("Added To Yearly")

$('#addtomonth').text("Add To Monthly")

$('#addtomonth').removeClass('addtomonthnew');

$('#addtodep').addClass('addtodepnew');

}

else {

if (data=="Monthly") {

$('#addtomonth').text("Added To Monthly")

$('#addtodep').text("Add To Yearly")

$('#addtodep').removeClass('addtodepnew');

$('#addtomonth').addClass('addtomonthnew');

}


<style>
.addtodepnew {
	background-image: url("img/tick.png");
	background-repeat:no-repeat;
	background-position:5px 2px;
	width: 210px;
	text-align: left;
	background-position: right;
}

.addtomonthnew {
	background-image: url("img/tick.png");
	background-repeat:no-repeat;
	background-position:5px 2px;
	text-align: left;
	width: 210px;
	background-position: right;
}

	</style>