jQuery addClass example

Change class name on click in jQuery

by Anjana Silva

HTML

<link rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css">
<script src="https://cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js"></script>
<header>

          <div class="r-header r-header-inner r-header-strip-01">

            <div class="r-header-strip r-header-strip-01">

              <div class="container">

                <div class="row clearfix">

                  <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12">

                    <div class="r-logo desktoplogo">

                      <a href="#" class="d-inline-block"><img src="assets/images/logo.png" class="img-fluid d-block " alt=""></a>

                    </div>

                    <div class="row mobilerow">

                      <div class="col-md-4 col-12">

                        <div class="r-logo">

                          <a href="#" class="d-inline-block"><img src="assets/images/logo.png" class="img-fluid d-block " alt=""></a>

                        </div>

                      </div>

                      <div class="col-md-6 col-9">

                        <div class="mobilebuttons r-header-action float-right">

                          <a href="#" data-featherlight="#offertepopup" class="r-search"> <i class="fas fa-file-alt watericon"></i> <span class="typewriterfontbold">OFFERTE</span></a>

                        </div>

                      </div>

                      <div class="col-md-2 col-3">

                        <a href="javaScript:void(0)" class="menu-icon"> <i class="fa fa-bars"></i> </a>

                      </div>

                    </div>

                  </div>

                  <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">

                    <div class="lightbox offertepopup" id="offertepopup">
                      <span class="toolspan">Vraag een offerte aan</span>
                      <form class="" action="includes/offertescript"...

CSS

.hiddenoffertefields{
  display:none;
}

JavaScript

$( document ).ready(function() {
  $('#offertetijden').change(function() {
     // console.log($(this).val())
     $('.hiddenoffertefields').slideDown('fast');
  });

  $("#offertepopup").on("click",".offertebutton",function(){    
    event.preventDefault();
    var $tijd = $('#offertetijden').val();
    var $volwassenen = $("input[name='volwassenen']").val();
    var $tieners = $('#tieners').val();
    var $kinderen = $('#kinderen').val();
    var $minis = $('#minis').val();
    var $babys = $('#babys').val();
    var $mailadres = $('#mailadres').val();
    url = 'includes/offertescript.php';
    
    alert($tijd);
    
   

    var posting = $.post(url, {
      tijd: $tijd,
      volwassenen: $volwassenen,
      tieners: $tieners,
      kinderen: $kinderen,
      minis: $minis,
      babys: $babys,
      mailadres: $mailadres
    });

    posting.done(function( data ) {
     $( ".offerteresult" ).empty().slideDown('fast').append( data );
    });
  });
});