Solved

jQuery Show or Hide button based on Selected list-item

Posted on 2016-09-18
4
35 Views
Last Modified: 2016-09-18
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

0
Comment
Question by:swaggerking
  • 3
4 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 

Author Closing Comment

by:swaggerking
Comment Utility
Works perfectly. Thank you, again. I appreciate your help.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now