Develop Reference

Finding selected value in a select box

I'm making a quiz application involving a select box. The user selects an option and when they press a button, it should check if the selected option is the correct answer by checking an array of values. I can't figure out how to get the selected value from the select box. I've tried to find information about this, but I only want to use JS, no JQuery. I tried using:
var item = document.getElementById("selections");
var selection = item.options[item.selectedIndex].value;
but I get a Type Error, saying that item.selectedIndex isn't defined. I'm confused because from what I found, selectedIndex is a default property of select tags? I've only worked with radio buttons before, using a for loop and checking every option to see which was checked, but I can't use that here. I don't know if it matters, but I'm doing this without a form tag, just linking a js function to an event listener on a button. Any help would be appreciated. Thanks!
Edit: Here is a fiddle of my code as per request: https://jsfiddle.net/jmf68ycu/
The part where the problem lies is in the submit() function in the first line.
Update: I found something online about the problem having to do with JS trying to call the element before the element is loaded, so I put the variables inside the function, which is only called when the button is pressed. The problem still persists (same error).

You use like this
var item = document.getElementById("selections").value;
you select value store item variable
this code use full for you. :)

You have a syntax error somewhere. your code looks right. you probably aren't getting the right id. your first line probably doesn't return the right select.
var e = document.getElementById("bla");
var str = e.options[e.selectedIndex].value;
alert(str);
<select id="bla">
<option value="val1">test1</option>
<option value="val2" selected="selected">test2</option>
<option value="val3">test3</option>
</select>

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.

I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.

Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Angular form select option value equals option text

I'm using this example of nested cascading selects http://jsfiddle.net/jhsousa/Mekhy/ ... I've got it in a form which when submits emails the values of the select options through. I've added NAME="" and ID="" to achieve this. However only a number is sent through.
How can I get the selected option .value to equal the .text which it is populated by?
This is my first experience with Angular so not having any joy.
I tried adding:
obj.value as obj.text for obj in array
to the ng-options. But the entire thing stopped working because ng-options already has a value.
Thanks.

There is no NICE way to get the text.
The only way is to activate a function call that loop through the Dropdown options elements and find the correct ID and extract the text from the optons.

Jquery - SerializeArray() checkbox that is not "checked"

so I am trying to implement the Jquery .serializeArray() method to transform a form into a JSON string to send it out in a request. This works great for my form except for checkboxes and radio buttons. The only time this works properly is when they are checked. Sometimes, I need to know if they are unchecked. They still need to get serialized.
I suppose I could manually loop through the form and grab the values and build the JSON object, but that would not be optimal.
According to the Jquery documentation found here: Jquery Docs anything that fits the W3 standards for a successful control found here should get included. Unfortunately, this does not include checkboxes that are not checked. Does anyone have a work around for this behavior? Thanks in advance...
var form = document.getElementById('f');
console.log($(form).serializeArray();
That spits out the serialized form with the checkboxes that are not checked excluded...

If you really want to use checkboxes and radio buttons, have those input fields update a corresponding hidden field. That way, the hidden input will always be sent.

how about trying this, I had a similar problem, I thought unchecked checkboxes should have a value as well, here is a quick work around,
add an extra class on each checkbox on your form "cbx"
make data an array from the form with serialise
then loop through all checkboxes with a class of "cbx"
and add them to the array with a value of 0, AFTER the array has been created with (serializeArray())
when you post the data you will see the unchecked checboxes and values of 0 will get transferred with the post.
var data = $('#form').serializeArray();
$(".cbx:not(:checked)").each(function() {
data.push({name: this.name, value: '0' });
});
$.post("testpage.asp", data);

An alternative would be to use a jQuery plugin. For example, serializeJSON has the option to set the value for unchecked checkboxes like this:
$('form').serializeJSON({checkboxUncheckedValue: "false"});
In any case, it is usually best to use hidden inputs for unchecked values.

Alright, so I developed a workaround.
Basically I wrote a function to compare the original JSON object to the serialized form. As I looped through, I compared the components. If there was a discrepancy, I pulled the component off the form and manually inserted it into the JSON. I used the array.splice() method to add the missing components. Worked for all of the missing inputs.

Sending ListBox selected values as Hidden Field using JQuery

I want to be able to send all the selected values from a listbox as a hidden field using JQuery.
I was able to send/retrieve a single value on form submission.
If anyone can share some code snippet, that would help.
Thanks in Advance!

Well, it's not so clear what you are really asking for. There is no "multiple selection dropdownlist" in HTML. To have a multiselect you need to specify
<select id="foobar" multiple>
that will create a listbox where you may select multiple elements. Calling
var sel = $('#foobar').val();
will return an Array of selected items.
edit
To get the text from each option, use .map() or jQuery.map(). Example:
var sel = $('#foobar').children('option:selected').map(function(i,e){
return e.innerText;
}).get();
That will create an Array containing the text of all selected entrys.

There's absolutely no need to do like that. You was apparently using request.getParameter() instead of request.getParameterValues() and wondering why it returned only the first value.
Just fix your servlet code accordingly:
String[] selectedItems = request.getParameterValues("dropdownname");
No need for ugly JS/jQuery hacks to send them all as single parameter. In future questions, try to ask how to solve a problem instead of how to achieve a solution which may after all not be the right solution per se.