Solved

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

Posted on 2014-12-04
5
238 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

743 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