Develop Reference

How to assign js value to the java variable?

<select name="DB">
<option value="findmaximum" onclick="functionse()" style=font-size:20px>findmaximum</option>
<option value="marklist" onclick="functionse()"style=font-size:20px>marklist</option>
</select>
<script type="text/javascript">
function functionse(){
var DBname=document.getElementsByName('DB');
<%
String DBname = (String) request.getAttribute("DB");
System.out.println(DBname);
ResultSet resultsettable=DBconnector.tables(DBname);
String Tablenames[]=new String[0];
int i=0;
while(resultsettable.next()){
String Tablename=resultsettable.getString("TABLE_NAME");
Tablenames[i++]=Tablename;
}
%>
}
print DBname vaule but return null

How to print selected string in select option drop down in csharp cshtml ASP.NET?

I new in ASP.NET.
I try to print selected string in select option drop down but Compilation error.
Compilation Error Description: An error occurred during the
compilation of a resource required to service this request. Please
review the following specific error details and modify your source
code appropriately.
Compiler Error Message: CS0201: Only assignment, call, increment,
decrement, await, and new object expressions can be used as a
statement
Here is my cshtml code.
#{ string FromAMPM = "AM"; }
<select id="FromAMPM" name="FromAMPM" class="form-control js-select">
<option value=""></option>
<option value="AM" #if (FromAMPM == "AM") { "selected"; } else { ""; }>AM</option>
<option value="PM" #if (FromAMPM == "PM") { "selected"; } else { ""; }>PM</option>
</select>
What wrong? Thanks

You can use ternary conditional operator in your case:
#{ string FromAMPM = "AM"; }
<select id="FromAMPM" name="FromAMPM" class="form-control js-select">
<option value=""></option>
<option value="AM" #(FromAMPM == "AM" ? "selected='selected'" : "")>AM<</option>
<option value="PM" #(FromAMPM == "PM" ? "selected='selected'" : "")>PM<</option>
</select>

The best way would be separate logic and html
#{
var FromAMPM = "PM";
var items = new List<SelectListItem>
{
new SelectListItem { Value= "", Text="Select" },
new SelectListItem { Value= "AM", Text="AM" },
new SelectListItem { Value="PM", Text="PM"}
};
}
you don't neeed selected code, it will automatically select asp-for value
<select id="fromAMPM" asp-for="#FromAMPM" class="form-control js-select" asp-items="#items"></select>

Converting a JavaScript function to jQuery - Select option list

This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});

I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks

Dynamically update form action based on selected <option>

So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)

some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>

You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}

You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}

How to read the selected item's value of a html dropdown menu in a javascript function

I have a form in html that contains a drop down menu like so
<form name= "gadget_selector">
<select name= "gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
And I want to access the value of the selected option in a javascript function like so
function someFunction(){
//var option = value of selected menu option
}
How would I do this?

var option = document.getElementById('gadget').value;
Set gadget as the id for the select as well, like this:
<select id="gadget" name="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>

assign id to select box "gadget":
<select name= "gadget" id="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
Now get selected value in javascript like below :
function GetSelectedItem() {
var option = document.getElementById('gadget').value;
}

Include an id attribute to select element and do as below, i am sure i will work,
var obj = document.getElementById("gadget");
alert(obj.value); // returns selected option value (1st method)
var selectedOption = obj.options[obj.selectedIndex]; // returns selected option element
alert(selectedOption.value); // return selected option value (2nd method)
example : http://jsfiddle.net/zUBpz/

First, assign an id to your <select> tag.
<select id='gadget' name= "gadget">
Then, get its value
if (document.getElementById('gadget')) {
var val = document.getElementById('gadget').value;
alert(val);
}

You can access by id, like this:=
<form name= "gadget_selector" >
<select name= "gadget" id='sel'>
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
function getvalue(){
if(document.getElementById('sel'))
{
alert(document.getElementById('sel').value);
var option = document.getElementById('sel').value;
}
}

here forms[0] is the form number starting from 0 from top to bottom of page
function someFunction(){
var option = window.document.forms[0].gadget.value;
}

Old question, but maybe other people get here like me so I'll add my solution:
The cleanest approach would be to have a reference to the select field, have the select backed by a model and add a watcher like this:
<script>
export default {
name: 'MyComponent',
data() {
return {
myValueName: 123
};
},
watch: {
myValueName() {
//
// Will log "Value: 123" and "Value: 456" instead of
// "123" and "456".
//
console.log(this.$refs['mySelectRef'].selectedOptions[0].text);
}
}
}
</script>
<template>
<select ref="mySelectRef" v-model="myValueName">
<option :value="123">Value: 123</option>
<option :value="456">Value: 456</option>
</select>
</template>
<style>
</style>