We Keep Coding

How to validate the select method with submit type?

I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>

You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">

You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example

How to get the OPTION's TEXT value

In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown .
I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}
$("select").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" type="hidden" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
PHP Code
$value =$_POST['make_text'];

Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with
$(".secondary").trigger("change");
or by Id
$("#Qualifications").trigger("change");
The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.
So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.
function setDropDown() {
var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
$("#Qualifications").trigger("change");
}
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>

I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.
Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :
function setDropDown() {
#Get the selected value of the ForceSelection select :
var index_name = $('#ForceSelection').val();
#Change the value of the other secondary select :
$(".secondary").each(function( index ) {
$(this).val(index_name).change();//This will change the value and trigger the change event.
});
}

Pass dropdown values to text box with javascript

I don't know much about javascript and unfortunately don't have time to learn before this project is due (wish I did!). I assume it is possible to pass the value of a drop-down selection into a hidden text input field on a form before the form is submitted. Could anyone help me figure out how to do that with javascript? Thank you! Here are my drop-down and text box details:
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment" value=””>
</select>
</div>

This is simply. First of all, you have to bind a change event handler for your select. Then, you have to set input text with value selected from dropdown.
var select=document.getElementsByTagName('select')[0];
var input=document.getElementById('ddepartment');
select.onchange=function(){
input.value=select.options[select.selectedIndex].text;
}
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment">
</div>

You can use this code:
var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
alert(myselect.options[myselect.selectedIndex].value);
document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};
Result: https://jsfiddle.net/fh5myefw/

Mind to close the tags, it's better practice.
var select = document.getElementById('selectElem');
var outputElem = document.getElementById('ddepartment');
select.addEventListener('change',function(){
var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text;
outputElem.value = newValue;
});
<select name="langdropdown" id="selectElem" required>
<option value="" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment" value="">

this is javascript function
function func(selectObject)
{
document.getElementById('ddepartment').value = selectObject.value;
}
add onchange event to select element like this
<select name="langdropdown" onchange="func(this)">

Here use this:
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
SNIPPET
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
<select id='lang' name="lang">
<option value="" selected>Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<option value="jpn">Japanese</option>
<option value="zho">Chinese</option>
<option value="fin">Finnish</option>
<option value="nav">Navajo</option>
</select>
<input type="hidden" id="cache" name="cache" value=””>

To redirect a page on Form submit using values from dropdown feild

this is my Form code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
what trying to achieve on submit my from redirects according to what values are selected from drop down
like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract
how can i achieve this ?
i have tried using Jquery
<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});
if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
}
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
}
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
}
is it right approach ?? how could i pass it to form action ?
edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>

I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.
Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.
UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.
<script>
function doSearch() {
var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;
if ((cat) && (style)) {
alert(cat + "?" + style);
// send to page using variables
}
else if (cat) {
alert(cat);
// send to page using variables
}
else {
alert("nothing selected");
}
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>

<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
$(".input-text-select styvalue").change(function(){
$("search_mini_form").attr("action","mysite/");
var thisvalue = $(this).find("option:selected").text();
$("search_mini_form").attr("action","mysite/"+thisvalue );
});

Please try the following code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<input class="button" title="Search" type="submit" value="Search"/>
</form>
Check the javascript code
$('#search_mini_form').submit(function(){
var mediums=$('#cat option:selected').text();
var styles=$('#style option:selected').text();
if(styles!="AllStyles" && mediums =="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
}
else if(styles =="AllStyles" && mediums !="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/'+mediums);
}
else
{
$('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
}
});
http://jsfiddle.net/zzyEY/18/

selected value from select box in javascript

I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"

You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);

var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check

Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>

the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>

get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox