[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2014-12-04
5
Medium Priority
?
370 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
[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
  • 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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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 …
Suggested Courses

649 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