Develop Reference

How to receive and display and send values from Select input field to database

This a sample of the dropdowns using select that I have
<label class="form__label" for="country"> Country Of Residence</label>
<select id="country" class="form__input" name="country"/>
<option value="null">Select Country</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="Bahrain">Bahrain</option>
<option value="Kuwait">Kuwait</option>
<option value="Oman">Oman</option>
</select>
The value is stored in the database as a 'String'.
I would appreciate some help in understanding the best way forward for 2 things
On Load
The string value from the database should be the option displayed in my dropdown. And if for some reason the string value in the database does not match, then the 'Select Country' option should be displayed.
On Change
The selected value should be the value that's sent to the database as a String. The functionality for this is already implemented but earlier I was using a input of type=text .. So what type of changes are needed to send this value now from a select field.
I've researched on the net but the more I research the more I get confused. And most answers seem to be jQuery solutions. I am looking for some help with Vanilla Javascript. Somethings I need to get clarity on is 'Do I need to have a hidden field to store the value and send and receive from database?' .. I am really confused with the information I've researched.
Any help would be appreciated.

Get select element value on event using pure JavaScript, Try this and get value.
var select_element = document.getElementById('country');
select_element.onchange = function() {
var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
var value = elem.value || elem.options[elem.selectedIndex].value;
alert(value);
// your another required code set!
}​

After a couple of days of struggling, I am using this solution. If this is overkill and there's a simpler approach, please do share in comments.
So I first identified the select element
const country = document.getElementById('country');
Then created a function as below
const displayCountry = function() {
//CREATE ARRAY OF ALL OPTIONS
const optionsArray = Object.entries(country.children);
console.log(optionsArray);
// GET NAME OF COUNTRY FROM SELECT FIELD
const nameOfCountry = country.getAttribute("value");
console.log(nameOfCountry);
// FIND OPTION WITH THE SAME COUNTRY NAME
const option = optionsArray.find(
(option) => option[1].value === nameOfCountry
);
// UPDATE OPTION FIELD BY SETTING ATTRIBUTE OF SELECTED
option[1].setAttribute("selected", true);
console.log(option[1]);
};
It can be shortened as below
const displayCountryShortened = function() {
Object.entries(country.children)
.find((option) => option[1].value === country.getAttribute("value"))[1]
.setAttribute("selected", true);
};

Show or hide form element

I have one html form - On that one text field like
<input type = "text" name = "age" value = "" id = "txt_age">
On the value of age i have to show this element like -
<select name = "married">
<option value = "Yes">Yes</option>
<option value ="No">No</option>
</select>
If age>18 then married field will be shown to form otherwise hide it.This age>18 condition is stored in database.As value of age changes married field toggle(show/hide).
How can i do it with javascript/jquery.Please suggest.
For more information, all these fields are genereated dynamically.So i was thinking to add onchange = "somefuction(condition);" with age while creating then look for field are to be shown when condition is satisfied, is also in DB.
OR
One solution may i think that -
The field in this case married will look for value of age changes.Then accordingly married will hide/show itself.But problem is that how married observe age field or call javascript function.
Sorry for not explaining full problem.

add id="married" to the select and use something like this.
$("#txt_age").blur(function() {
if(parseInt($(this).val() > 18) {
$("#married").show();
} else {
$("#married").hide();
}
});

Try this & note
avoid the space between id = "txt_age"
rest this should help:
var $foo = $('select[name="married"]');
$foo.hide(); // in start always hide
$('#txt_age').on('blur', function() {
if(parseInt(this.value)>18){
$foo.hide();
} else {
$foo.show();
}
});

How to get selected value in combo box?

If I have a form like this.
<form name="myform" action="" method="POST">
<select name="mydropdown">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
</form>
For radio buttons I would do
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
but this can't I get to work on combo boxes.
How can I get the value of the selected option in a combo box?
Update
It is called on a webpage with many forms, so I need the selected value from this particular combo box.
Here is how I get the values from text boxes and radio buttons.
$('form').live('submit', function(){
var title = this.elements.title.value;
var type = $(this).find('input:radio[name="ctype"]:checked').val() || '';
var sect = ?
...

Simply :
$('select[name="mydropdown"]').val();
UPDATE:
And when inside one of the forms :
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"]').val();
...

For select boxes its enough to use val() to get the selected value.
$('select[name="mydropdown"]').val();
EDIT: I edited the response because I could have sworn there was an id named mydropdown :)

$('select[name="mydropdown"] option:selected').val()
UPDATE:
$('form').live('submit', function(){
var value_of_dropdown = $(this).find('select[name="mydropdown"] option:selected').val();
...
});

Using jQuery, just go for it like:
$('select').val();

$('select[name="mydropdown"]').change(function() {
$('select[name="mydropdown"]').val();
});

Get value selected with javascript:
var countsw=document.getElementById("controlid").options[document.getElement.getElementById("controlid").selectedIndex].value;
With this code you can get value selected combobox even if client-side control has this attribute runat="server" that use in server-side.

Dynamically Change Multiple Hidden Form Fields

I'm somewhat new to jQuery. I'm pretty sure this is possible, but I'm not quote certain how to code this.
What I'm looking to do is to use a dropdown with selections that represent ranges (e.g. if someone were searching for bedrooms, the dropdown selctions would look like "0-2", "3-5", "6+"). Then when someone chooses a selection, two hidden fields would by dynamically filled. One field with the minimum of the range, and the other field with the maximum of the range.
Here is an example of how I'm trying to structure this:
<select id="bedrooms" class="dropdown">
<option>Bedrooms</option>
<option></option>
<option value="1">0-2</option>
<option value="2">3-5</option>
<option value="3">6+</option>
</select>
<input type="hidden" name="bedrooms-from" value=''>
<input type="hidden" name="bedrooms-to" value=''>
I suppose the values of each option could change, I wasn't sure what the best way to approach that would be.

I haven't actually run this, but I think it should work:
$("#bedrooms").change(function ()
{
// Get a local reference to the JQuery-wrapped select and hidden field elements:
var sel = $(this);
var minValInput = $("input[name='bedrooms-from']");
var maxValInput = $("input[name='bedrooms-to']");
// Blank the values of the two hidden fields if appropriate:
if (sel.val() == "") {
minValInput.val("");
maxValInput.val("");
return;
}
// Get the selected option:
var opt = sel.children("[value='" + sel.val() + "']:first");
// Get the text of the selected option and split it on anything other than 0-9:
var values = opt.attr("text").split(/[^0-9]+/);
// Set the values to bedroom-from and bedroom-to:
minValInput.val(values[0]);
maxValInput.val((values[1] != "") ? values[1] : 99999999);
});

$("select").on("change", function() {
$("form").append( /* <input type='hidden'> tag here */ );
});

Enabling and disabling fields

I have a form that has two drop down fields lets say A is one and B is another. I want the drop down box B to be disabled until one of the value in the drop down A is selected .
How should I write a Java script?

Use the onchange event of dropdown A to check it's value and change the disabled property of dropdown B:
document.getElementById("dropdown_A").onchange = function ()
{
if (this.selectedIndex == 2) // if the 3rd option is selected
document.getElementById("dropdown_B").disabled = true;
}
Note this code needs to run after the dropdown A element (or the entire document) has been parsed.

For your dropdown_b, make the disabled property = "disabled"
for your dropdown_a, make the onchange to a function that will change dropdown_b's disabled property.
<html>
<head>
window.onload = function()
{
dda = document.getElementById("dropdown_A");
ddb = document.getElementById("dropdown_b");
dda.onchange = function()
{
if(dda.options[dda.selectedIndex] != "")
ddb.disabled = "";
};
}
</head>
<body>
<select id="dropdown_A">
<option value="" selected="selected"></option>
<option value="asdf">asdf</option>
<option value="12345">12345</option>
</select>
<select id="dropdown_B">
..
</select>
</body>
</html>
Basically, until the user selects an actual option nothing will happen... so the blank option [""] won't deselect the other select.