I have a DropDownCheckBoxes where I can CHECK multiple items from the list. Now what I want is,
A validation on button click for multiple Items selected must be from the same month if the selected items are not from the same month then it should prompt an alert message for selecting the items as for same month.
For ex:- If first selected item from the list is of April then the user has to select the next item from April only, if other month selected than it should throw an alert message.
Here is the screenshot of my DropDownCheckBoxes
[![DropDownCheckBoxes][1]][1]
Below is my code which I tried first for getting selected value of the list but got an error as
Line: 13
Error: ‘options’ is null or not an object
See the js fiddle for my code [HERE][2]
kindly suggest what is wrong and how to validate the user on button click for the same.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
So I took a look at your code. And since I didn’t know it you wanted it in plain Javascript or jQuery, I took the liberty of doing it in jQuery (since it’s easier).
Also I don’t know the true purpose of your code, so I based it upon your example and the information you gave us. This might give you an idea on how to complete your task.
Either run the snippet below or take a look at this fiddle.
/* Slide open menu and change arrow direction */
$("#caption").click(function() {
$("#cmbEmp_Name_dv").slideToggle();
$("#down, #up").toggle();
});
/* On change disable all checkboxes from different months */
$("input[type='checkbox']").change(function() {
var amountChecked = $("input[type='checkbox']:checked").length;
if (amountChecked === 1) {
var month = getMonth($(this).next().html());
$("input[type='checkbox']").each(function() {
var myMonth = getMonth($(this).next().html());
if (month !== myMonth) {
$(this).prop("disabled", true);
$(this).next().css("background-color", "gray");
}
});
}
if (amountChecked === 0)
$("input[type='checkbox']").prop("disabled", false).next().css("background-color", "transparent");
});
/* Function to check if all checked options are from the same month */
$("#btnSubmit").click(function() {
var firstSelected = $("input:checked").first().next().html();
if (firstSelected !== undefined && firstSelected !== "undefined" && firstSelected && firstSelected != "") {
var firstMonth = getMonth(firstSelected);
var isNotEqual = false;
$("input:checked").each(function() {
var month = getMonth($(this).next().html());
if (firstMonth !== month)
isNotEqual = true;
});
if (isNotEqual)
alert("Please check items from the month " + firstMonth);
else
alert("Validation complete - good to go!");
}
else
{
alert("Select an option first!");
$("#cmbEmp_Name_dv").slideDown();
}
});
/* Function to strip off all characters and return the month */
function getMonth(html) {
var monthPart = html.split("(").length > 1 ? html.split("(")[1] : "-";
return monthPart.substr(0, monthPart.indexOf("-")).trim();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmbEmp_Name_sl" class="dd_chk_select" style="display:inline-block;position:relative;width:55%;">
<div id="caption">
Select <span id="down">↓</span><span id="up" style="display: none;">↑</span>
</div>
<div id="cmbEmp_Name_dv" class="dd_chk_drop" style="display:none;position:absolute;width:500px;">
<div id="checks" style="height:45%;">
<input id="cmbEmp_Name_0" type="checkbox" name="cmbEmp_Name$0" />
<label for="cmbEmp_Name_0">--Select--</label><br />
<input id="cmbEmp_Name_1" type="checkbox" name="cmbEmp_Name$1" />
<label for="cmbEmp_Name_1">ANIL VITTHAL GAWADE-312(April - 2016)</label><br />
<input id="cmbEmp_Name_2" type="checkbox" name="cmbEmp_Name$2" />
<label for="cmbEmp_Name_2">ANURADHA A. DESHMUKH-53(April - 2016)</label><br />
<input id="cmbEmp_Name_3" type="checkbox" name="cmbEmp_Name$3" />
<label for="cmbEmp_Name_3">ASMA SIDDIQUI-83(April - 2016)</label><br />
<input id="cmbEmp_Name_4" type="checkbox" name="cmbEmp_Name$4" />
<label for="cmbEmp_Name_4">DEEPTI MAITHIL-1250(April - 2016)</label><br />
<input id="cmbEmp_Name_5" type="checkbox" name="cmbEmp_Name$5" />
<label for="cmbEmp_Name_5">GAURAV JHUNJHUNWALA-2222(March - 2016)</label><br />
<input id="cmbEmp_Name_6" type="checkbox" name="cmbEmp_Name$6" />
<label for="cmbEmp_Name_6">HITESH PANCHAL-253(April - 2016)</label><br />
<input id="cmbEmp_Name_7" type="checkbox" name="cmbEmp_Name$7" />
<label for="cmbEmp_Name_7">JAGDISH UBARE-362(April - 2016)</label><br />
<input id="cmbEmp_Name_8" type="checkbox" name="cmbEmp_Name$8" />
<label for="cmbEmp_Name_8">JAIDEEP MAHAKAL-134(April - 2016)</label><br />
<input id="cmbEmp_Name_9" type="checkbox" name="cmbEmp_Name$9" />
<label for="cmbEmp_Name_9">JASMINE RATHOD-228(April - 2016)</label><br />
<input id="cmbEmp_Name_10" type="checkbox" name="cmbEmp_Name$10" />
<label for="cmbEmp_Name_10">JIGAR SHAH-358(April - 2016)</label><br />
<input id="cmbEmp_Name_11" type="checkbox" name="cmbEmp_Name$11" />
<label for="cmbEmp_Name_11">Junaid Chaudhary-2487(April - 2016)</label><br />
<input id="cmbEmp_Name_12" type="checkbox" name="cmbEmp_Name$12" />
<label for="cmbEmp_Name_12">KAMAL MATALIA-17(April - 2016)</label><br />
<input id="cmbEmp_Name_13" type="checkbox" name="cmbEmp_Name$13" />
<label for="cmbEmp_Name_13">KETAN NALAWADE-2478(April - 2016)</label><br />
<input id="cmbEmp_Name_14" type="checkbox" name="cmbEmp_Name$14" />
<label for="cmbEmp_Name_14">KRUPA DAVE-349(April - 2016)</label><br />
<input id="cmbEmp_Name_15" type="checkbox" name="cmbEmp_Name$15" />
<label for="cmbEmp_Name_15">NEHA ARUN KHANNA-2145(March - 2016)</label><br />
<input id="cmbEmp_Name_16" type="checkbox" name="cmbEmp_Name$16" />
<label for="cmbEmp_Name_16">NILESH GAIKWAD-903(March - 2016)</label><br />
<input id="cmbEmp_Name_17" type="checkbox" name="cmbEmp_Name$17" />
<label for="cmbEmp_Name_17">PALLAVI KATHAL-2465(April - 2016)</label><br />
<input id="cmbEmp_Name_18" type="checkbox" name="cmbEmp_Name$18" />
<label for="cmbEmp_Name_18">RAMESH SANAP-1855(March - 2016)</label><br />
<input id="cmbEmp_Name_19" type="checkbox" name="cmbEmp_Name$19" />
<label for="cmbEmp_Name_19">SAKINA VIVIAN DSILVA-2392(April - 2016)</label><br />
<input id="cmbEmp_Name_20" type="checkbox" name="cmbEmp_Name$20" />
<label for="cmbEmp_Name_20">SAMANTHA SAXENA-2442(April - 2016)</label><br />
<input id="cmbEmp_Name_21" type="checkbox" name="cmbEmp_Name$21" />
<label for="cmbEmp_Name_21">SANGEETA JIJI RANE-314(April - 2016)</label><br />
<input id="cmbEmp_Name_22" type="checkbox" name="cmbEmp_Name$22" />
<label for="cmbEmp_Name_22">SARVESH SUBHASH CHAUDHARY-2462(March - 2016)</label><br />
<input id="cmbEmp_Name_23" type="checkbox" name="cmbEmp_Name$23" />
<label for="cmbEmp_Name_23">SAYED SOHAIL JAVED AKHTAR-2014(April - 2016)</label><br />
<input id="cmbEmp_Name_24" type="checkbox" name="cmbEmp_Name$24" />
<label for="cmbEmp_Name_24">SHALIBHADRA HAKANI-2158(April - 2016)</label><br />
<input id="cmbEmp_Name_25" type="checkbox" name="cmbEmp_Name$25" />
<label for="cmbEmp_Name_25">SONAL RAVINDRA AMBEDE-2533(March - 2016)</label><br />
<input id="cmbEmp_Name_26" type="checkbox" name="cmbEmp_Name$26" />
<label for="cmbEmp_Name_26">SRINIVAS VENKANNA SAMUDRALA-2525(March - 2016)</label><br />
<input id="cmbEmp_Name_27" type="checkbox" name="cmbEmp_Name$27" />
<label for="cmbEmp_Name_27">SUNIL DESAI-2484(March - 2016)</label><br />
<input id="cmbEmp_Name_28" type="checkbox" name="cmbEmp_Name$28" />
<label for="cmbEmp_Name_28">UMANG DARJI-2239(March - 2016)</label><br />
<input id="cmbEmp_Name_29" type="checkbox" name="cmbEmp_Name$29" />
<label for="cmbEmp_Name_29">UMESH VASHISTH-1900(March - 2016)</label><br />
<input id="cmbEmp_Name_30" type="checkbox" name="cmbEmp_Name$30" />
<label for="cmbEmp_Name_30">VISHAL SUBHASH PAWADE-1881(March - 2016)</label>
</div>
</div>
</div>
  
<input type="submit" name="btnSubmit" value="Process" id="btnSubmit" />Notice
I did implement @Freak his suggestion, by disabling all the options different from the user his first choice.
On the other hand, I also implemented the check on the Validate button, where as it will check if the user may or may not have checked a different month. Just in case.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0