Solved

make a selectbox(es) required based on another select box option

Posted on 2014-12-04
5
312 Views
Last Modified: 2015-01-02
I have a select box with some options. If say for example one square is selected from the select box as shown in the test webpage below. so if 2 squares are selected then 2 select boxes are show

http://dev.mommyjewelry.com/initials/little-squares.html

you will see that one more select box is shown with default option saying select initial. This is the select box I want to make it required by showing an alert saying please select an initial if the user clicks add to shopping cart without selecting the initial.

Currently I am just using a message under each select box say this field is required as you can see. I interested in showing the alert popup the select boxes

SO if 2 squares are selected and the user hits add to shopping cart without selecting an initial then the alert should show up. Even if one initial is selected and second not then also alert should show up

Any advice or reference is appreciated

Thanks and appreciate it
0
Comment
Question by:niceoneishere
  • 2
5 Comments
 
LVL 10

Expert Comment

by:Hans Langer
ID: 40481314
Hi. You could just validate the value of the current option selected.
function addItemToShoppingBag(){
var littleSquare1Value = $('#little-square-1 option:selected').val()
if(littleSquare1Value =='select-initial'){
	alert('Select Little Square 1')
	return false
}

//ADD TO SHOPPING BAG
// add littleSquare1Value 
}

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
ID: 40481335
Thanks for replaying, so is this means I would have to add all the 10 little squares to the code. I was hoping may be to use class instead of id of the select box.

So instead of doing

var littleSquare1Value = $('#little-square-1 option:selected').val()
var littleSquare2Value = $('#little-square-2 option:selected').val()

And so on

Open in new window


Can we use a class
Thanks and appreciate it
0
 
LVL 10

Accepted Solution

by:
Hans Langer earned 500 total points
ID: 40482931
Well, if you need to validate more than one dropdown you can just validate if there is at least one dropdown with the initial value, like this (im using pSelect asuming that each dropdown has that class):

if($('.pSelect option:selected[value="select-initial"]').size() > 0){
//CANT ADD TO THE BAG BECAUSE THERE IS A DROPDOWN WITH NO OPTION SELECTED 
}

Open in new window


or you can use this, to invidually evaluate each dropdown:
$('.pSelect').each(function(){
    var dropdown = this
    var selectedOptionValue = $(dropdown).find('option:selected').val()
    console.log(selectedOptionValue)
   if(selectedOptionValue == 'select-initial'){
    console.log('INVALID >',$(this))
   }else{
    console.log('VALID >',$(this))
   }
})

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

21 Experts available now in Live!

Get 1:1 Help Now