Solved

jQuery Show or Hide button based on Selected list-item

Posted on 2016-09-18
4
50 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 57

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 57

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 57

Expert Comment

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

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

690 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