Get all values of checked checkboxes and use it on a url string

Question

I have series of checkboxes that have values. Now what I want to do is when I click a button, I want to get all the values of the checked checkboxes and put it on the url string that I will be using. Here's some of my code.

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

Now onClick.

$('#btnSearch').click(function () {
     var dateFrom = $(".dateFrom").val();
     var dateTo = $(".dateTo").val();

     window.location.href = "home/masterschedule?scheduleType=" + /*here goes the checkboxes*/ + "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;
 });

Here's my receiving action.

[InPrivate]
    public ActionResult MasterSchedule(List<string> scheduleType ,string dateFrom = "", string dateTo = "")
    {
        var appointments = _appointmentRepository.All().ToList();
        var viewModel = new MasterScheduleIndexViewModel();

        if (dateFrom == "" || dateTo == "")
        {
            viewModel.Appointment = appointments;
            viewModel.DocumentPackage = _documentPackageRepository.All().Where(a => a.AMGStatus == DocumentPackageStatus.Approved || a.DocumentPackageStatus == DocumentPackageStatus.Approved).ToList();
            viewModel.AppointmentNotes = _appointmentNoteRepository.All().ToList();
            viewModel.Users = _userRepository.All().ToList();
        }
        else
        {
            var startDate = DateTime.ParseExact(dateFrom, "d/M/yyyy", null);
            var endDate = DateTime.ParseExact(dateTo, "d/M/yyyy", null);

            viewModel.Appointment = appointments.Where(a => DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) >= startDate && DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) <= endDate).ToList();
        }

        return View(viewModel);
    }

I'm expecting a List of strings from the url, but would it be better if it's an array? Any ideas? Thanks!

PSL · Accepted Answer · 2013-12-04 03:18:07Z

1

You can use serialize i.e $(':checkbox[name="scheduleType"]').serialize()

This will take care of sending the scheduleType in the querystring
Example(...?scheduleType=Proposed&scheduleType=RescheduledPending&scheduleType=Cancelled&dateFrom=...)

And you can leave the List<string> scheduleType as it is in your action parameter.

Try

window.location.href = "home/masterschedule?" +
        $(':checkbox[name="scheduleType"]').serialize() + 
        "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;

Update

Based on the comment you want to deserialize it to Enum List, you can just do:

In your check box cast them to (int) as follows.

<input type="checkbox" name="scheduleType" value="@((int)AppointmentStatus.NoSchedule)"/>

and in your action change the type of your action argument to List<AppointmentStatus> scheduleType or as List<int> scheduleType (based on how you need it) instead of List<string> scheduleType and you should be good to go.

edited Dec 4, 2013 at 3:18

answered Dec 4, 2013 at 2:42

PSL

124k21 gold badges257 silver badges243 bronze badges

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

12 Comments

Luke Villanueva Over a year ago

Thank you for this suggestion but I have a problem here. The first value has "scheduleType=" string on it. The rest is good.

PSL Over a year ago

@ljpv14 You mean in my example right? I don't know what you have there so just typed in. Also remember that you don't have to append scheduleType= in the query string as you have in your original code

Luke Villanueva Over a year ago

I tried serializing and received it as a list of string successfully. The problem is, the first element containts this string. "scheduleType=Scheduled", other string are good without the scheduleType= string in it.

PSL Over a year ago

@ljpv14 That is because you are not using the code i have. You dont need to prefix "scheduleType=

Luke Villanueva Over a year ago

And also, I need to get their values, not their strings. I'm expecting numbers, not words.

|

Ringo · Accepted Answer · 2013-12-04 02:48:20Z

0

Give your checkboxes a class and you can do that:

html:

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule" class="chk"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

jquery:

$('#btnSearch').click(function () {
     var chkValues  = '';
    $('.chk').each(function(){
        if($(this).prop('checked') == true){
            chkValues += $(this).val();
        }
    });
 });

answered Dec 4, 2013 at 2:48

Ringo

3,9973 gold badges26 silver badges39 bronze badges

1 Comment

PSL Over a year ago

Just an fyi... jquery takes care of this with serialize() method. Also you are missing the key scheduleType

Collectives™ on Stack Overflow

Get all values of checked checkboxes and use it on a url string

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related