jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<div class="marketplace_div">
  <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="" data-option-id="2" data-url="sanitaetshaus/">Sanitätshaus</option>
      <option value="" data-option-id="2" data-url="otto/">Otto</option>
      <option value="" data-option-id="2" data-url="ebay-conctact-details/">Ebay</option>
    </select>

    <select name="amazon_marketplace" id="amazon_marketplace">
      <option value="a" hidden>Amazon Marktplatz? / Amazon Marketplace?</option>
      <option value="" data-url="https://bonmedico.de/review/de/">Amazon Germany</option>
      <option value="" data-url="https://bonmedico.net/review/">Amazon UK</option>
      <option value="" data-url="https://bonmedico.net/review/">Amazon France</option>
      <option value="" data-url="https://bonmedico.net/review/">Amazon Italy</option>
      <option value="" data-url="https://bonmedico.net/review/">Amazon Spain</option>
      <option value="" data-url="https://bonmedico.net/review/">Amazon USA</option>
    </select>
    <input id="submit_btn" name="submit" type="submit" value="Weiter / Submit" disabled>
  </form>
</div>

CSS

#purchase_channel_wrap select {
	  font-size: 20px;
	  padding: 5px 10px 5px 10px;
	  background-color: #F4F4F4 !important;
	  border-radius: 5px;
	  color: #777;
	  height: 50px !important;
	  position: relative;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  appearance: none;
	  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23777'/></g></svg>") no-repeat;
	  background-position: right 5px top 50%;
	}

JavaScript

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

  $amazon_marketplace.on('change', function() {
    $submit_btn.attr("disabled", false);
  })

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