JQuery setting Hidden Input for MVC Post

Question

I have this fiddle, it shows a listbox with multiple select, and if you click read, it takes the selected values and puts them into <p> tag.

Two questions:

1) How do you modify the fiddle that I have created, so when you have finished selecting the items in the listbox it automatically puts them into the <p> tag? I'm guessing you go down the "on change" route.

2) How do you modify the fiddle that I have created, so it puts the array of selected values into a hidden input which is then submitted back to a MVC3 controller? Is this achievable doing it this way?

UPDATE: Taking on what you guys put as answers, I thought I'd share what I managed to achieve and accomplish with your answers, the example shown in this fiddle

Single select listbox
Dynamically changing the contents of the second listbox depending on the selected item of the first listbox
Showing what items are selected from the second box with the selected value from the first listbox at the end, and this is all put in the hidden input

Thanks guys for taking the time to help me :)

Not quite sure I understand your first question. It looks to me like it's doing that - can you clarify? — Cody, Mar 20 '13 at 09:47
I'm not sure i can clarify any further, basically, i click an item or select multiple ones, it automatically adds the values to the p tag — Callum Linington, Mar 20 '13 at 09:53
So what you want is just post the selected item in an array to your controller on button click..... — ankur, Mar 20 '13 at 09:56

score 1 · Accepted Answer · answered Mar 20 '13 at 10:14

here is fiddle http://jsfiddle.net/tAaRR/2/

i just replaced your javascript code with below:

 $(document).ready(function () {
     $('#App_RunFromUSB').change(function () {
         if ($('#App_RunFromUSB:checked').length > 0) {
             $('#jj').show('1000');
         } else {
             $('#jj').hide('1000');
         }
     });

     $('#SelectBox').change(function () {
      var Value = '';
             var text = '' 

         $("#SelectBox option:selected").each(function () {
            Value+=$(this).val();
             text +=$(this).text();
             $("#selectedValues").append(Value + ": " + text + "<br />");
         });
      alert(text);
         $('#hidden1').val(text);

     });

 });

Hope this helps. if any issues let me know.

so this should effectively place all options chosen, into the hidden input, for posting back to the controller :), thanks — Callum Linington, Mar 20 '13 at 13:47

score 1 · Answer 2 · answered Mar 21 '13 at 04:33

1

Just out of curiosity, updated your fiddle with some optimization and reduced a lot of non required code. You can take a look if you want.

http://jsfiddle.net/tkkSr/

$(function () {       
     var artItems = ["Art 1","Art 2","Art 3","Art 4","Art 5","Art 6"];
     var vidItems = ["Video 1","Video 2","Video 3","Video 4","Video 5","Video 6"];
     $('#SelectBox').change(function () {
         var str = "", inHTML = "",items;
         items = $(this).val() == 'art' ? artItems: vidItems;
         $.each(items,function(i,ob){
             inHTML += '<option value="'+i+'">'+ob+'</option>'
         });
         $("#SelectBox2").empty().append(inHTML);
     });

     $('#SelectBox2').change(function () {
         $("#selectedValues").text($(this).val() + ';' + $("#SelectBox").val());
         $('#hidden1').val($(this).val());
     });

 });

answered Mar 21 '13 at 04:33

PSL

123,204
21
253
243

You know what, i was going to ask this as a question, "could anyone improve that code", but some people complain about those types of questions, so I'm glad you have done this for me, it is so much more than helpful! – Callum Linington Mar 21 '13 at 09:51
`function(i,ob){ inHTML += '' }` is that what `$.each` takes as a second argument, is there any requirements for the params of the function or how many there are? – Callum Linington Mar 21 '13 at 09:55
please could you look at this question http://stackoverflow.com/questions/15549027/jquery-adding-and-removing-items-from-listbox – Callum Linington Mar 21 '13 at 13:32
@No1_Melman.. I am late to the party :). But i have provided another way of doing it. Please have a look at it... – PSL Mar 21 '13 at 15:17

score 0 · Answer 3 · answered Mar 20 '13 at 10:02

This bit of jQuery should do.....example here.

$("#SelectBox").change(function(){
$("#selected").empty();

$("#SelectBox option:selected").each(function(){
    $("#selected").append("<p>" + $(this).val() + " : " + $(this).html() + "</p>"); 
    });
});

Now, if you want to include the selected items in a hidden value and post it to your controller, you could use an AJAX call or a hidden form value.

JQuery setting Hidden Input for MVC Post

3 Answers3