CODEWITHSUNDEEP
javascriptjqueryhtmlformsselect
TCD
TCD

Reputation: 71

Changing image using Select option drop down, but for multiple events?

Using JQuery to change an image on the change of a select, the code works, on one form, however if I try to apply to same thing to another form the JQuery just doesn't work. Need to implement this one a basis where I can use the same code to change individual select.

Feel free to run the code and see what I mean, the first item works, change the select option to red, the image changes, try the same with the next one, no luck although its written in the same fashion.

If you need anything else let me know, thanks in advance.

$(function(){
  $("#colour").on('change', function(){
    $("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<ul class="shelf">
		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
	   		<h4 class="item_name">C&amp;J Wash Bag</h4>
	    	<span class="item_price">£30.00</span>
	   <select id="colour">
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
    <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
	    	<select class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li>

		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
	   		<h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
	    	<span class="item_price">£28.00</span>
	    	 <select id="colour">
    <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
    <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
    <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
	    	<select required class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li></ul>

Upvotes: 3

Views: 1817

Answers (3)

ketan
ketan

Reputation: 19341

It is bad thing to give same id to multiple element. There is same ID used for multiple element. Make it unique it works.

You can use class instead of id. like Here i give colour class and change image using sibling selector.

$(function(){
  $(".colour").on('change', function(){
       $(this).siblings(".item_thumb").attr("src", $(this).find(":selected").attr("data-src"));
  });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<ul class="shelf">
		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
	   		<h4 class="item_name">C&amp;J Wash Bag</h4>
	    	<span class="item_price">£30.00</span>
	   <select id="colour" class="colour">
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
    <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
	    	<select class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li>

		<li class="simpleCart_shelfItem">
	    	<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
	   		<h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
	    	<span class="item_price">£28.00</span>
	    	 <select id="colour1" class="colour">
    <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
    <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
    <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
    <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
	    	<select required class="item_quantity">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>	
			</select>
	    	<input type="hidden" class="item_shipping" value="0" />
	    	<input type="button" class="item_add" value="Add To Basket" />
		</li></ul>

Hope it helps.

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

As part of W3C rules, a html cannot contain duplicate ids. So I would suggest to change the ids and perform your color change by picking up class as below:

Changes -

  • Added class colorChange to your color select element and changed its ids
  • Changed event change to fire on class and getting the actual target image with $(this) reaching to its parent li and getting the img with class image_thumb

$(function() {
  $(".colorChange").on('change', function() {
    $(this).closest('li').find('.item_thumb').attr("src", $(this).find(":selected").attr("data-src"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="shelf">
  <li class="simpleCart_shelfItem">
    <img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
    <h4 class="item_name">C&amp;J Wash Bag</h4>
    <span class="item_price">£30.00</span>
    <select id="colour" class="colorChange">
      <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
      <option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
    </select>
    <select class="item_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="hidden" class="item_shipping" value="0" />
    <input type="button" class="item_add" value="Add To Basket" />
  </li>

  <li class="simpleCart_shelfItem">
    <img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
    <h4 class="item_name">C&amp;J Wool Lined Gloves</h4>
    <span class="item_price">£28.00</span>
    <select id="colour1" class="colorChange">
      <option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
      <option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
      <option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
      <option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
    </select>
    <select required class="item_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input type="hidden" class="item_shipping" value="0" />
    <input type="button" class="item_add" value="Add To Basket" />
  </li>
</ul>

Upvotes: 0

measurelink
measurelink

Reputation: 1

It looks to me that you have "imageToSwap" duplicated. Therefore the function isn't able to locate the correct object to refresh.

Upvotes: 0

Related Questions