Solved

jQuery Show or Hide button based on Selected list-item

Posted on 2016-09-18
4
48 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 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41803877
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 56

Expert Comment

by:Julian Hansen
ID: 41803878
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
ID: 41803888
Works perfectly. Thank you, again. I appreciate your help.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41803979
You are welcome.
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

733 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