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
– Cody, Commented Mar 20, 2013 at 9: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
– Callum Linington, Commented Mar 20, 2013 at 9:53
So what you want is just post the selected item in an array to your controller on button click..... — ankur
– ankur, Commented Mar 20, 2013 at 9:56

Sangeeta · Accepted Answer · 2013-03-20 10:14:52Z

1

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.

answered Mar 20, 2013 at 10:14

Sangeeta

3881 gold badge6 silver badges20 bronze badges

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

1 Comment

Callum Linington Over a year ago

so this should effectively place all options chosen, into the hidden input, for posting back to the controller :), thanks

PSL · Accepted Answer · 2013-03-21 04:33:06Z

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, 2013 at 4:33

PSL

124k21 gold badges257 silver badges243 bronze badges

4 Comments

Callum Linington Over a year ago

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 Over a year ago

function(i,ob){ inHTML += '<option value="'+i+'">'+ob+'</option>' } 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 Over a year ago

please could you look at this question stackoverflow.com/questions/15549027/…

PSL Over a year ago

@No1_Melman.. I am late to the party :). But i have provided another way of doing it. Please have a look at it...

Cody · Accepted Answer · 2013-03-20 10:02:32Z

0

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.

answered Mar 20, 2013 at 10:02

Cody

9,00419 gold badges75 silver badges128 bronze badges

Collectives™ on Stack Overflow

JQuery setting Hidden Input for MVC Post

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related