0

We have a form where a user can move items from one multi-select box to another. We are using MVC 4.5 and jquery validate with Microsoft's unobtrusive javascript.

The problem is, when submitting the form, the values within the select boxes don't get submitted because the user doesn't know after moving items that they have to also select all those items for submission.

So the solution sounds easy: use jquery to select all items upon submit.

After doing some research (thanks stackoverflow community), we were able to discover the necessary jquery code to intercept the submit process. However, the problem arises in that when the code selects the items, only pre-existing items in a select box are selected. Live (dynamic) items that have been moved do not get selected.

Here is the code that we first used:

$('#UserProfileForm').bind('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

We discovered that using bind doesn't work but live should:

$('#UserProfileForm').live('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

However, we are using jquery 1.9 and the live function has been removed. It has been replaced with this:

$(document).on('invalid-form.validate', 'form', function () {
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

However, this still doesn't work. So I replaced the selection function with an alert to see if it works at all:

$(document).on('invalid-form.validate', 'form', function () {
    alert('test');
});

An alert does not pop up. Any ideas?

ADDITIONAL INFO

For those wondering why I'm referencing invalid-form.validate is because I am testing with invalid form data. The same scenario would apply if it was valid form data. I just haven't gotten to the point on how to bind live data to the valid form submission process either.

Robert F.
  • 19
  • 4
  • Can we see the html associated with `invalid-form.validate` – Dave Hogan Sep 24 '13 at 17:00
  • I believe invalid-form.validate is created on the fly by the microsoft unobtrusive library and/or the jquery validate library. – Robert F. Sep 24 '13 at 17:02
  • Ok - definately sounds like a life-cycle binding issue. Have you tried `$(document).on('invalid-form.validate', '#UserProfileForm', function () ` – Dave Hogan Sep 24 '13 at 17:04
  • Here is some reference material: http://stackoverflow.com/questions/4747017/how-to-add-a-submithandler-function-when-using-jquery-unobtrusive-validation – Robert F. Sep 24 '13 at 17:08

1 Answers1

-1

After inspecting the elements, I noticed that the jquery was adding the selected attribute to the options. However, the options weren't highlighted. This had me thinking that maybe the jquery call to add the selected attribute was wrong.

After some experimentation, I discovered that it was wrong. It appears that if you use the attr function of jquery, it doesn't actually set the option to selected in the DOM. Using the prop function does.

Here is the code:

$(document).on('submit', 'form', function (e) {
    $(this).find('.selectbox option').each(function (i) {
        $(this).prop("selected", true);
    });
});

This allows the form to select all options as selected upon form submission whether the submit handler is valid or not. If you just want to select based on invalid info, use this:

$('form').bind('invalid-form.validate', function () {
    $(this).find('.selectbox option').each(function (i) {
         $(this).prop("selected", true);
    });
});

Enjoy!

Robert F.
  • 19
  • 4