Solved

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

Posted on 2014-12-04
5
365 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

679 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