Solved

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

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
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)

832 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