jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<div id="purchase_channel_wrap">
  <form name="marketplace_list" id="marketplace_list" method="post">
    <select name="purchase_channel" id="purchase_channel">
      <option value="" hidden>Marktplatz / Marketplace</option>
      <option value="" data-option-id="1">Amazon</option>
      <option value="eBay" data-option-id="2" data-url="product-select/">eBay</option>
      <option value="Otto" data-option-id="2" data-url="product-select/">Otto</option>
      <option value="Real" data-option-id="2" data-url="product-select/">Real</option>
      <option value="Rakuten" data-option-id="2" data-url="product-select/">Rakuten</option>
      <option value="Sanitätshaus" data-option-id="2" data-url="product-select/">Sanitätshaus</option>
      <option value="Webshop" data-option-id="2" data-url="product-select/">Webshop</option>
    </select>

    <select name="amazon_marketplace" id="amazon_marketplace">
      <option value="a" hidden>Amazon Marktplatz? / Amazon Marketplace?</option>
      <option value="Amazon Germany" data-url="product-select/">Amazon Germany</option>
      <option value="Amazon UK" data-url="product-select/">Amazon UK</option>
      <option value="Amazon France" data-url="product-select/">Amazon France</option>
      <option value="Amazon Italy" data-url="product-select/">Amazon Italy</option>
      <option value="Amazon Spain" data-url="product-select/">Amazon Spain</option>
      <option value="Amazon USA" data-url="product-select/">Amazon USA</option>
    </select>
    <input id="submit_btn" name="submit" type="submit" value="Weiter / Submit">
  </form>
</div>

CSS

#purchase_channel_wrap select, #purchase_channel_wrap input {
    width: 100%;
}

#purchase_channel_wrap {
    width: 40%;
    margin: auto;
}

@media only screen and (max-width: 767px) {
    #purchase_channel_wrap {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #purchase_channel_wrap {
        width: 60%;
    }
}

JavaScript

(function($) {
   var $purchase_channel = $('#purchase_channel'),
     $amazon_marketplace = $('#amazon_marketplace'),
     $submit_btn = $('#submit_btn');
   $amazon_marketplace.hide();
   $submit_btn.hide();
   $purchase_channel.on('change', function() {
     if ($('option:selected', this).data('option-id') == 1) {
       $amazon_marketplace.fadeIn();   
     } else if ($('option:selected', this).data('option-id') == 2) {
       $amazon_marketplace.fadeOut();
			  $submit_btn.fadeIn();
     }
   })

   $amazon_marketplace.on('change', function() {
     $submit_btn.fadeIn();
   })

   $('#marketplace_list').submit(function(e) { 
     if ($('option:selected', $purchase_channel).data('option-id') == 1) {
       $(this).attr('action', $('option:selected', $amazon_marketplace).data('url'));
			 $('option:selected', $purchase_channel).val($('option:selected', $amazon_marketplace).val());
     } else {
       $(this).attr('action', $('option:selected', $purchase_channel).data('url'));
     }
    //   $(this).submit();
   });
 })(jQuery);