Select multiple items with javascript / asp.net

Question

This is what I have so far I have a view that displays date that I have not reported a time for.

My idea is to tick the dates I want to report a time, so I can report time for multiple dates, and if I did check a date I do not want to report for I just uncheck that box.

I have that working, (kinda) The problem is if i want to select a date, i'll always have to select the first in the list before I can check any other date.

Like this:

That works great as long as I always choose the first date in the list.

But that is not what I am looking for, I want the option so I can report any data without having to check the first date first. This would not work because I did not check the first date:

This is my script:

var dateArr=new Array();
function SetDate(dt) {
   if(document.getElementById("isoDate").checked) {
       if(dateArr.indexOf(dt)<0){ //Check if date is already added. if not add it to array.
          dateArr.push(dt);
    }
    else{
         var index=dateArr.indexOf(dt);
         if (index > -1) {
            dateArr.splice(index, 1);//Remove from array if checkbox uncheck
    }
  }
     $('#date').val(dateArr.join(" ")); //Add space separated string to the #date element.
 }
}

And this is my view where I get the dates:

@foreach (var date in ViewBag.MissingDays)
{
    var isoDate = date.ToString("yyMMdd");
    <div class="col-md-1">
        <input type="checkbox" id="isoDate" name="isoDate" value="@isoDate"onclick="javascript:SetDate('@isoDate');" />
        @isoDate
    </div>
}

avi · Accepted Answer · 2015-08-17 11:28:23Z

1

There are some observations regarding your code, like is not a good practice to have multiple items with the same id(i could actualy say that is a bad practice, i am talking about the checkboxes, the same name should be enough) or lines like:

if(document.getElementById("isoDate").checked)

that ruins everything(this i think it is the real source of your problem since the result is the first element and not being checked will step to else)

Seeing that you use jquery, here you have a small sample of how this should look like.

edited Aug 17, 2015 at 11:28

answered Aug 17, 2015 at 7:20

avi

9128 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Joakim Carlsson Over a year ago

I am a bit unsecure about this line 'input[name="isoDate"]' what does it mean?

avi Over a year ago

It is a selector. Try to read more about jquery selectors, this will be a good place to start: api.jquery.com/attribute-equals-selector . Actually you already used selectors in your line: $('#date').val(dateArr.join(" "));

Joakim Carlsson Over a year ago

Indeed, just never seen it like you did that before. For some strange reason I do not get it to function like it should, the values doesn't change.but it's working on Jsfiddle so it's something on my end. Thanks for the quick answer.

avi Over a year ago

sory for the dumb question but just to be sure... have you included jquery library to your page?

avi Over a year ago

Oh...yes...well... try to put the javascript code between $(document).ready(function () { //the code }); Check this link pastebin.com/5e1dZdxS

|

Collectives™ on Stack Overflow

Select multiple items with javascript / asp.net

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related