asked on

jQuery Show or Hide button based on Selected list-item

I have a unordered drop down that list the various colors available. Sometimes a color is out of stock or on pre-order. When the color is out-of-stock or available only by pre-order I want to change the submit button.
ie:
If in-stock/default button
<button class="instock">Buy Now</button>
If Out of Stock
<button class="out">Get Notified By Email</button>
If Pre-Order
<button class="pre">Pre-Order</button> and
<button class="out">Get Notified By Email</button>

I've tried incorporating this with no luck. I'm sure there is any easier/cleaner way to get this to work with my current page.

<script>
$(document).ready(function () {
    $("#update-form").submit(function (e) {
									   
if ( $(.init).attr('data-rel') == "out" ) {
    $("button.instock").hide();
	$("button.preorder").hide();
	$("button.notify").show();
		}
	else if ( (.init).attr('data-rel') == "pre" ) {
 
    $("button.instock").hide();
	$("button.preorder").show();
	$("button.notify").show();
	}
	
	else {
		$("button.instock").show();
		$("button.notify").hide();
		$("button.preorder").hide();
	} 
	    e.preventDefault(e);
    });
	 $("button").change(function () {
        $("#update-form").submit();
        return false;
    });
});
</script>

Open in new window

This is what I'm current working with.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<form action="#" id="update-form" method="POST" accept-charset="UTF-8">
        <input type="hidden" name="on0" value="Color">
        <input type="hidden" name="os0" class="kolor" value="">
        <ul class="singleSelect">
            <li class="init">CHOOSE COLOR</li>
            <li class="red-sq" data-rel="instock" data-value="Red">RED</li>
            <li class="green-sq" data-rel="pre" data-value="Green">GREEN</li>
            <li class="blue-sq" data-rel="out" data-value="Blue">BLUE</li>
            <li class="yellow-sq" data-rel="instock" data-value="Yellow">YELLOW</li>
            <li class="orange-sq" data-rel="instock" data-value="Orange">ORANGE</li>
            <li class="pink-sq" data-rel="instock" data-value="Pink">PINK</li>
            <li class="white-sq" data-rel="instock" data-value="White">WHITE</li>
            <li class="black-sq" data-rel="instock" data-value="Black">BLACK</li>
        </ul>
         <button id="submit" class="blk instock" onClick="return EJEJC_lc(this.parentNode);">ADD TO CART</button>   
         <button id="submit" class="blk preorder" style="display: none;" onClick="return EJEJC_lc(this.parentNode);">PRE ORDER</button>  
         <button id="submit" class="blk notify" style="display: none;" onClick="return EJEJC_lc(this.parentNode);">PRE ORDER</button>
	</form>

<!--DROP LIST SCRIPT -->
<script type="text/javascript">
$(window).load(function(){
	$("ul.singleSelect").on("click", ".init", function() {
	   
	   $(this).closest("ul.singleSelect").children('li:not(.init)').slideToggle(300);
	});
	
	var allOptions = $("ul.singleSelect").children('li:not(.init)');
	$("ul.singleSelect").on("click", "li:not(.init)", function() {
		allOptions.removeClass('selected');
		
		// CLONE
		var newinit = $(this).clone().addClass('init');
		// REMOVE EXISTING
		$('.init').remove();
		// PUT IT BACK
		$("ul.singleSelect").prepend(newinit);
		$(this).addClass('selected');
		
		allOptions.fadeToggle(700);
		
 	$("#submit").click(function() {
		var text = $("ul").find(".selected").data("value");
		$( "input.kolor" ).val( text );
		//alert("The selected Value is "+ text);
	});
});
	});
</script>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Just some notes on your code

.init - should be in quotes (lines 5 and 10)
Line 10 is missing the $( in front of the .init
When access the custom data attribute you do like this

$('element').data('rel').;

Open in new window

$('element').attr('data-rel')

Open in new window

will work but unecessary

swaggerking

ASKER

Works perfectly. Thank you, again. I appreciate your help.

Julian Hansen

You are welcome.