Django Size (Dropdown) and Color (Radio Buttons) with changing prices/images dependant of radio button data JQuery

user_15068910 0
Viewed 266

I want to hide/show the colors (radio buttons) when i choose a different size (dropdown).

enter image description here

Like this: Red - 16Gb, Blu and Red 32Gb. But instead of showing Red, Blue and Red, it should only show red when it is 16Gb and only show Blue and Red when it is 32Gb (All are separate products I added from the admin panel)

My HTML is:

<form id='add-form' method='POST' action="{% url 'cart' %}">
                                                
  <h3 id='price'>{{ object.variation_set.first.price }}</h3>

  <br/>
  <!-- SIZE -->
  <span class="text-uppercase">Size :</span>

   {% csrf_token %}

  <select name="size" class='form-control' id="size">
     {% for variation in sizes %}
          <option data-variation-id-1='{{variation.size}}' >
                      {{ variation.size.name }}
          </option>
                                                    
      {% endfor %}
                                                
   </select>
<br/>
<!-- COLOR -->

<span class="text-uppercase">Color :</span>

<div id="buttons">
 {% for variation in colors %}
 <!-- this controls how the price, images, and all attributes of the variations change through JQuery-->
   <input type="radio" class="radio_color"  name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='{{variation.size}}' data-sale-price="{{ variation.sale_price }}" data-price="{{ variation.price }}" value="{{ variation.id }}" 
data-color-hex="{{variation.color.code}}"/>
                                                            
{{ variation.color }}
                                                    
{% endfor %}
                                
</div>

My JS is:

function setPrice(input){
    var price = $(input).attr("data-price")
    $("#price").html("<h3> $" + price  + "</h3>");

}
setPrice("input[type='radio']");

//on change
$('input[type=radio]').change(function(){

    setPrice($(this));
});

How do I make my Colors (Radio buttons), dependant (show/hide) on what size is chosen in the dropdown?

The variables i'd be using are data-variation-id-1 for the size of the dropdown and data-variation-id-2 for the size of the radio buttons (e.g. Red - 16Gb)

dropdown radio-button django html jquery
1 Answers

You can write change event for select as well . Inside this get the attr value of selected option and using that show/hide your elements . So , just add outer div inside your for-loop :

{% for variation in colors %}
<div>
  //your radio button
</div>                                                 
{% endfor %}

Demo Code :

function setPrice(input) {
  var price = $(input).attr("data-price")
  $("#price").html("<h3> $" + price + "</h3>");

}
setPrice("input[type='radio']");

$('input[type=radio]').change(function() {
  setPrice($(this));
});
//on change of select
$("select[name=size]").change(function() {
  var attr_size = $(this).find("option:selected").data("variation-id-1") //get attr value
  //hide all div inside buttons
  $("#buttons div").hide()
  //show only divs where match found
  $("#buttons input[data-variation-id-2=" + attr_size + "]").closest('div').show()

});
$("select[name=size]").trigger('change')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='add-form' method='POST' action="{% url 'cart' %}">

  <h3 id='price'>{{ object.variation_set.first.price }}</h3>

  <br/>
  <!-- SIZE -->
  <span class="text-uppercase">Size :</span>

  <select name="size" class='form-control' id="size">
    <option data-variation-id-1='16'>
      16 gb
    </option>
    <option data-variation-id-1='32'>
      32 gb
    </option>

  </select>
  <br/>
  <!-- COLOR -->

  <span class="text-uppercase">Color :</span>

  <div id="buttons">
    <!--just add some outer div -->
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='16' data-sale-price="123" data-price="12" value="1" data-color-hex="123" /> Red
    </div>
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='16' data-sale-price="{{ variation.sale_price }}" data-price="123" value="{{ variation.id }}" data-color-hex="{{variation.color.code}}"
      /> Blue
    </div>
    <div>
      <input type="radio" class="radio_color" name='item' id="variantid" data-img-list='{{variation.get_image_url}}' data-variation-id-2='32' data-sale-price="{{ variation.sale_price }}" data-price="44" value="{{ variation.id }}" data-color-hex="{{variation.color.code}}"
      /> Red

    </div>
  </div>

user_106064000
Related