jQuery addClass example

Change class name on click in jQuery

by Suryar Praveen

HTML

<form id="simswap" class="tab-content">
		<div class="container custom_container ">
				<div class="col-md-12 col-xs-12 simswap_inner_containers">
						<h3 class="active_hdng">Move your existing number to a new sim</h3>
			<div class="col-md-4 col-xs-12">
						<input type="tel" class="simswap_msisdn_class" placeholder="Enter mobile number" id="simswap_msisdn" name="simswap_msisdn" value="" data-rule-required="true" data-rule-digits="true" data-rule-phoneNo="true" maxlength="10" />
						<inpu type="hidden" name="simswap_cc" value="34" />
						<font for="SIMSWAP_MSISDN" class="prefix44_simswap">+34</font>
				</div>
				<div class="col-md-4 col-xs-12">
						<input type="tel" class="simswap_msisdn_class" placeholder="ICCID Code" id="old_iccid" name="old_iccid" value="" data-rule-required="true" data-rule-number="true" data-rule-minlength="19"  data-rule-maxlength="19" maxlength="19"/>
						<a href="#" data-toggle="tooltip" data-placement="top" title="ICCID, long number printed on your SIM and SIM holder." class="toot-tip-error-sim-swap"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
				</div>
				<div class="col-md-4 col-xs-12">
						<input type="tel" class="simswap_msisdn_class" placeholder="New ICCID Code" name="new_iccid" id="new_iccid" data-rule-required="true" data-rule-number="true" data-rule-minlength="19" data-rule-maxlength="20" maxlength="20"/>
						<a href="#" data-toggle="tooltip" data-placement="top" title="ICCID, long number printed on your SIM and SIM holder." class="toot-tip-error-sim-swap-tool-tip" ><i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
				</div>
				</div>
				<div class="col-md-12 simswap_inner_containers">                          
				 <h4 class="active_hdng">1. What was your last recharge amount?</h4>
				<div class="col-md-8 col-xs-12">
					<ul class="recharge_ammount">
						<li>
                  <input name="amount" type="radio" id="amount_0" value="5" required="" aria-required="true">
   ...

JavaScript

window.storeSimSwap = function() {
    var userData = $('#simswap').serialize();
	var addon = 0;
var amountValue = $("input[name='amount']:checked").val();
var freqtopupValue = $("input[name='rd_freqtopup']:checked").val();
var activateValue = $("input[name='activate_bundle']:checked").val();
var dialedValue = $("#dailed_num").val();
if(amountValue){ addon++; alert("Please selected minimum 3 options. Your current selected items are = " + addon);}
if(freqtopupValue){ addon++; alert("Please selected minimum 3 options. Your current selected items are = " + addon);}
if(activateValue){ addon++; alert("Please selected minimum 3 options. Your current selected items are = " + addon);}
if(dialedValue){ addon++; alert("Please selected minimum 3 options. Your current selected items are = " + addon);}

    jQuery('#simswap').validate();
	jQuery.ajax({
		type: "POST",
		url: my_ajax_object.ajax_url,
		data: "action=validate_subscriber&"+userData,
		success: function (out) {
			if(jQuery.trim(out) == ""){
				Alert(out);
			}else{
				Alert(out,'no');
			}
		}
	});
}