jQuery toggleClass example

Toggle class name on click in jQuery

by jimkennelly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
<div class="container-fluid">
<form class="row g-3">
  <div class="col-md-6">
    <label for="firstName" class="form-label">First</label>
    <input type="text" readonly value="jim" class="form-control" id="firstName">
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Last</label>
    <input type="text" readonly value="test" class="form-control" id="lastName">
  </div>
  <div class="col-7">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" title="You must enter a valid email address" required
    title="You must enter a valid email address">
  </div>
  <div class="col-7">
    <label for="mobilephone" class="form-label">Phone</label>
    <input type="tel" class="form-control" id="mobilePhone" name="mobilePhone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"  placeholder="Enter your phone" required
    title="Phone number must be area code and number ###-###-####"
    >
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>
</div>

JavaScript

var ii =0;
var IsModalUp = false;

$(document).ready(function(){




setInterval(function () {
            if (!IsModalUp) {
                $table.bootstrapTable('refresh', {silent:true});
                if ($remove.hasClass('btn-danger')) {
                    $remove.removeClass('btn-danger');
                    $remove.addClass('btn-success');
                } else {
                    $remove.removeClass('btn-success');
                    $remove.addClass('btn-danger');
                }
            }
        }, 7000); // Execute every 7 seconds.




});

function updateData(){
ii+=1;

 $.ajax({
                type: 'POST',
                cache: false,
                url: '@Url.Action("GetPhoneEmail")',
                data: {},

                success: function (d) {
                    if (d.success) {
												$("#email").val(ii);
                        $("#email").val(ii);
                        
                        IsModalUp = false;
                    }
                },
                    error: function (ee) {
                        $.alert({
                            title: 'Warning!',
                            content: 'Error communicating with the server',
                        });
                        isModalUp = false;

                    }


                });
                
}