Develop Reference

How do I return a selected value from a complicated dropdownlist in MVC?

My dropdownlist works like a treeview. Since, I cant seem to figure out if Html.DropDownListFor does this, I am having to do it the old fashioned way. Here is my code.
View:
Controller:
How do I get the selected value (LocationId) back to my controller? id="locSelection" in the view, brought in as object selection in the controller. Thank you:)

First of all it's not a old fashioned way it's the bootstrap way of replicating dropdown
Second of all it's not a drop down element...
Since this contains only ul and li tags and those are not of input type you cannot post back the values...
Also another problem in the code is you are setting the ID locSelection on multiple elements and that too in a loop .. So you will have a whole lot of elements with the same ID which is a Big NO. The Id's must be unique else it's a nightmare when we start using Jquery on these elements...
Solution -- Use Jquery
Remove the Id's
Add a class to all the anchor tags eg: locSelection
Maintain a hidden input field inside your form. We will use this hidden input field to post back the data on form submit.
<input type='hidden' name='locSelection' id='locSelection' />
Now bind a click event to the anchor tag inside the li and inside this event put that Clicked anchor tag text value into the hidden input.
$('.locSelection').on('click',function(){
$('#locSelection').val($(this).text());
});

Generate input field using jQuery's append

Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks

You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo

In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?

Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.

You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.

Process each form fields in a form using JQuery

I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.
First is I want to count the number of fields in the form using JQuery. I tried the following.
var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);
The form has one select box, 3 input fields and a textarea. But it was giving 0, instead of 5.(#fileUpload is the form id I want to submit)
How to get the exact number of fields?
Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.

I would recommend using each() function:
$("#fileUpload input,select,textarea").each(function(){
console.log(this);
}
Btw: don't use alert, use console.log() instead ;)

You need to make sure that the form is loaded before your js script is launched.
To do so, wrap it in document ready like so:
$(function () {
var ln = $('#fileUpload').find('input, select, textarea').length;
alert(ln);
});

There should no problem in your code
Check that you have added the jquery and add an attribute to your form
id="fileUpload" then check
Also, check you don't have any other element having id fileUpload
like input type="file"
In your page <form id='fileUpload' ... > must be unique
Fiddle http://jsfiddle.net/qUJZf/

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.

I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.

Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.

document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.

The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.