Dropdownchecboxes selected value validation in javascript

Question

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.

You are using a custom select, in which you show a div with multiple options. These are not the option elements from a select tag, causing the error "options is null or not an object". — Jorrex
– Jorrex, Commented Apr 14, 2016 at 7:05
First of all, try formatting your HTML ;) It's easier to read and see the structure instead of one block of text. — Jorrex
– Jorrex, Commented Apr 14, 2016 at 7:07
@Jorrex: what happened ?? did you got what u wanted ? or I need to make some more formattion ? — HEEN
– HEEN, Commented Apr 14, 2016 at 8:02

Jorrex · Accepted Answer · 2016-04-14 08:18:33Z

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">&darr;</span><span id="up" style="display: none;">&uarr;</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>
&nbsp&nbsp
<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.

I am, but keep in mind that this is not a chat. These comments are meant for commenting on the matter at hand.
You should include jQuery script first, otherwise this code won't work. Also, wrap it in $(document).ready(function() { ... }); so the code will be executed when the document is ready. And the checkboxes may be dynamically binded, you do have to make sure you have a div with id="cmbEmp_Name_dv" since the code will search for that element. And if you decide to remove the arrows, you should delete that one line of code: $("#down, #up").toggle(); That should do the trick. Most important is including jQuery and wrapping it in $(document).ready(function() { ... });
and if this is the answer you were searching for, please mark it as "Answer", so other people can learn from this as well.

Collectives™ on Stack Overflow

Dropdownchecboxes selected value validation in javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related