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

swaggerkingAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
First problem your brackets are wrong - your have your submit handler inside your click.
Second problem you have 3 buttons with id="submit" id's must be unique;

I would make your data-rel values the id's of the buttons they correspond to.
Then I would simply do this on your item click
		var btn = $(this).data('rel');
		$('button.blk').hide();
		$('#' + btn).show();

Open in new window

Changing the id's on the buttons means your form handler needs to change. Two options
$('form').submit

Open in new window

Or
$('button.blk').click

Open in new window

Either should work.
This code seems to do the trick
<!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="preorder" data-value="Green">GREEN</li>
            <li class="blue-sq" data-rel="notify" 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="instock" class="blk instock" onClick="return EJEJC_lc(this.parentNode);">ADD TO CART</button>   
         <button id="preorder" class="blk preorder" style="display: none;" onClick="return EJEJC_lc(this.parentNode);">PRE ORDER</button>  
         <button id="notify" class="blk notify" style="display: none;" onClick="return EJEJC_lc(this.parentNode);">GET NOTIFIED BY EMAIL</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');
		var btn = $(this).data('rel');
		$('button.blk').hide();
		$('#' + btn).show();
		
		allOptions.fadeToggle(700);
	});
	
 	$("button.blk").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

0
 
Julian HansenCommented:
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
0
 
swaggerkingAuthor Commented:
Works perfectly. Thank you, again. I appreciate your help.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.