I have select cars in my form. How to pass its value to change function like parameter?
<html>
<head>
<title>hello</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="JavaScript">
var a = 0;
var b = 0;
</script>
</head>
<body>
<script>
function change()
{
a=5
b=6
update();
}
function update()
{
var returns = document.getElementById("returns");
returns.value =a;
var status = document.getElementById("status");
status.value = b;
}
</script>
<form>
<input type="button" value="change" onclick="change()">
<input type="text" name="returns" id="returns">
<input type="text" name="status" id="status">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Besides the extra script tag (which is wrong) you can get the value of a select element using javascript like:
html
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
javascript
var cars = document.getElementById("cars");
var carSelected = cars.options[cars.selectedIndex].value;
Or as mentioned by #RickHitchcock just use cars.value.
Related
I want to make a selection (without a php or other code) and when the value changes, I want to put the value in another html tag like an Input field. I've looked upon w3 schools and there's only code for getting the value of the select tag. Here's what I've tried:
<body>
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
<script>
function update(val) {
var x = document.getElementsByName("desc");
x.value = val;
$('desc').val(val);
}
</script>
So, in the input text should update with the value from the select? Nothing happens
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
<script>
function update(val) {
var x = document.getElementsByName("desc");
x[0].value = val;
$('desc').val(val);
}
</script>
document.getElementsByName return array, you have to provide index for x to provide value
Actually I think you are overthinking it:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
<script>
function update(val) {
$('#desc').val(val);
}
</script>
</html>
Maybe
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function update(combo) {
var x = document.getElementById("desc");
x.value = combo.options[combo.selectedIndex].value;
}
</script>
<!--js-->
</head>
<body>
<select name="selection" id="selection" onchange="update(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
</body>
</html>
You can use proper very less jQuery Code
<select name="selection" id="selection" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
$(document).ready(function() {
$("#selection").change(function(){
$('#desc').val(this.value);
});
});
You can do two changes to your script.
A) Remove $('desc').val(val) line. It is not needed since x.value = val would suffice.
B) You can change var x = document.getElementsByName("desc") into var x = document.getElementById("desc"). Since you have name and id same, we can use getElementById() in place of current one. As getElementsByName() returns an array.
So the code will look like.
<select name="selection" id="selection" onchange="update(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input name="desc" type="text" id="desc" />
<script>
function update(val) {
var x = document.getElementById("desc");
x.value = val;
}
</script>
Also, since you are calling your javascript method through onchange event, your solution will not work if select element has only 1 option. To fix this, try using onblur or onclick inplace of onchange depending upon your usecase.
I have a button that pass the value of input box to my select. The problem is when the value of my input box are didn't have in my select it show empty. But I want to show OTHERS if it's empty or shows the given value and put asterisk, e.g. POTATO* .
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" name="fruitname" id="fruitname" placeholder="Fruit Name"></input>
<button name="findfruit" id="findfruit" onclick="findfruit()">Find Fruit in Select</button>
<select name="fruitcontainer" id="fruitcontainer">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Coconut">Coconut</option>
<option value="Durian">Durian</option>
<option value="Others">Others</option>
</select>
</body>
</html>
<script type="text/javascript">
function findfruit(){
document.getElementById('fruitcontainer').value = document.getElementById('fruitname').value;
}
</script>
Test if the text input one of the possible values of the <select>.
function findfruit() {
var value = document.getElementById('fruitname').value;
if (value == '') {
value = "Others";
} else if (!document.querySelector("#fruitcontainer option[value='" + value + "']")) {
value += '*';
var newOption = document.createElement('option');
newOption.value = value;
newOption.textContent = value;
document.getElementById('fruitcontainer').appendChild(newOption);
}
document.getElementById('fruitcontainer').value = value;
}
<input type="text" name="fruitname" id="fruitname" placeholder="Fruit Name"></input>
<button name="findfruit" id="findfruit" onclick="findfruit()">Find Fruit in Select</button>
<select name="fruitcontainer" id="fruitcontainer">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Coconut">Coconut</option>
<option value="Durian">Durian</option>
<option value="Others">Others</option>
</select>
I need some assistance with the code below, I want to set what has been chosen to the textarea but I dont want to equate/return the value attribute but the narration. for the case below the textarea is getting value 1 and I want it to get the narration Line One
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.value;
}
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
You need to find the selectedIndex's option's text content (or HTML Content).
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
<script type="text/javascript">
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function() {
myOption.value = this.querySelectorAll('option')[this.selectedIndex].innerHTML;
}
</script>
You can change the value of each option
<!DOCTYPE html>
<html>
<head lang="en">
<title>Testing Code</title>
</head>
<textarea id="priority1" name="priority1"></textarea>
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="Line one">Line one</option>
<option value="Line two">Line Two</option>
<option value="Line three">Line Three</option>
</select>
<body>
<script type="text/javascript">
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.value;
}
</script>
</body>
</html>
You could get the selected option by index this.options[this.selectedIndex] then get the option text using .text instead of value :
myStrategy.onchange = function () {
myOption.value = this.options[this.selectedIndex].text
}
Hoep this helps.
var myOption = document.getElementById('priority1');
var myStrategy = document.getElementById('strategy1');
myStrategy.onchange = function () {
myOption.value = this.options[this.selectedIndex].text
}
<select id="strategy1" name="strategy1">
<option value=""></option>
<option value="1">Line one</option>
<option value="2">Line Two</option>
<option value="3">Line Three</option>
</select>
<br><br>
<textarea id="priority1" name="priority1"></textarea>
Blockquote
Hi i have this problem:
My HTML page is working fine without form, but when i put the form, than i can't select on the 1/2 finle and in finle.
See my code.
How can i solve this probleem?
Blockquote
<html>
<body bgcolor=#0B4C5F>
<head>
<script type="text/javascript">
function groupA(val) {
var x = document.getElementById("groupAB");
x.options[1].value = val;
x.options[1].text = val;
}
function groupAB(val) {
var x = document.getElementById("groupABCD");
x.options[1].value = val;
x.options[1].text = val;
}
function groupABCD(val) {
var x = document.getElementById("groupABCDEFGH");
x.options[1].value = val;
x.options[1].text = val;
}
</script>
</head>
<!--=========================================================-->
<form action="insert.php" method="post">
<!-------------------------------------------------------------------------->
<select name="Achtstelfinale1" onchange="groupA(this.value)">
<option value="Select">1e GROUP A</option>
<option value="Brazil">Brazil</option>
<option value="Mexico">Mexico</option>
<option value="Croatia">Croatia</option>
<option value="Cameroon">Cameroon</option>
</select>
<p></p>
<select name="1/4 Finale 1" id="groupAB" onchange="groupAB(this.value)">
<option value="Select">1/4 Finale 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="1/2 Finale" id="groupABCD" onchange="groupABCD(this.value)">
<option value="Select">1/2 FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="Finale" id="groupABCDEFGH" onchange="groupABCDEFGH(this.value)">
<option value="Select">FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<!----------------->
</form>
<!----------------->
</body>
</html>
you can try and change the html tags. it should look like this:
<html>
<head>`
#Here goes the Head section(title,links, meta tags and all that stuff)
</head>
<body>
#Here goes the body section
</body>
</html>
Hope it was helpfull...
if you have more questions just ask and the stack community will be glad to help you out
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