I hope someone will help me with this, here's the problem. All I want is when choose single in the drop down, I want the numbers in that textbox to be multiply by 1 and whether I choose double in the drop down it will only multiply by 2. Thank you in advance for the help. :)
Also here's my code, I think we can use onchange in here. But I don't know how? Thank you again for the help.
<html>
<head>
<title>Sample</title>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
</body>
</html>
Go ahead and try this.
The variable value will contain the value that you have in your select (dropdown)
<html>
<head>
<title>Sample</title>
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
</head>
<body>
<form>
Number:
<input type="text" id="fnum"/>
<br/><br/>
Type:
<select>
<option>Choose</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
</select>
<br/><br/>
Result:
<input type="text" id="result" readonly/>
</form>
<script>
$('document').ready(function(){
$('select').change(function(){
var value = $('select').val();
var fnum = $('#fnum').val();
if(value == 'Single'){
var result = fnum*1;
$("#result").val(result);
}
else if(value == 'Double'){
var result = fnum*2;
$("#result").val(result);
}
})
})
</script>
</body>
</html>
Related
How about, I have a <select> tag which is filled with the BD.
What I want to do is that when selecting the desired option, that the <select> values are assigned to different <input> tags.
Currently I select some of the options, I get the value and the text of the option. I want to have them as 2 different options.
In my example I have this <select>
<option value = "1"> Pizza1 Pizza2 </ option>
My question is how to separate the text of the option so that Pizza 1 is in one option and Pizza2 is in a different option.
So that something like this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1 Pizza2</option>
<option value="2">Hamburger1 Hamburger2</option>
<option value="3">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
Just put them in different option values as follows:
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
I hope I got what you mean. To make them different options, you just have to put them into different option tags, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
<option value="3">Hamburger1 Hamburger2</option>
<option value="4">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
This is the Select tag That I used..
<select class="form-control" id="VillagesComboidmod">
<option>Kandy</option>
<option>Ampitiya</option>
<option>Semaneriya</option>
</select>
This is the code that I used to select a value..
document.getElementById('VillagesComboid').value = "Ampitiya";
You've just got a typo in the reference to the element id.
To set the value of the <select> element
document.getElementById('VillagesComboid').value = "Ampitiya";
should be
document.getElementById('VillagesComboidmod').value = "Ampitiya";
Here it is working on JSBin
You should update your select like below:
<select class="form-control" id="VillagesComboidmod">
<option value="Kandy">Kandy</option>
<option value="Ampitiya">Ampitiya</option>
<option value="Semaneriya">Semaneriya</option>
</select>
Use, ==, for comparision. and = for assignment
document.getElementById('VillagesComboid').value == "Ampitiya";
<!DOCTYPE html>
<html>
<body>
<select class="form-control" id="VillagesComboidmod">
<option>Kandy</option>
<option>Ampitiya</option>
<option>Semaneriya</option>
</select>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert(document.getElementById("VillagesComboidmod").value == "Ampitiya");
}
</script>
</body>
</html>
Please run the above CODE
Here is a working DEMO
just change your id
document.getElementById('VillagesComboid').value='Ampitiya';
to
document.getElementById('VillagesComboidmod').value='Ampitiya';
Here you go
<html>
<body>
<p id="demo"></p>
<select class="form-control" id="VillagesComboidmod">
<option value="K">Kandy</option>
<option value="A">Ampitiya</option>
<option value="S">Semaneriya</option>
</select>
<script>
document.getElementById('VillagesComboidmod').value = 'A';
</script>
</body>
</html>
I have the min value and max value. If I want to create a drop down show from minimum to maximum number. Any expert can help me solve? Thanks
You can use input time number for that. Which will allow you to set min and max value.
Check following:
<input type="number" min="1" max="5" placeholder="how many person you want?" style="width: 200px;" >
Working Fiddle
your question is very easy , so that I hope I can clear understand what do you want , as following code maybe is you want . Please let me know if it isn't you need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-2.1.4.js"></script>
</head>
<body>
<select id="test1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="min" value="1"/>
<input id="max" value="10" />
<select id="test2">
</select>
</body>
</html>
<script>
var mySelect = $('#test2');
for (i = $('#min').val() ; i <= $('#max').val() ; i++)
{
mySelect.append(
$('<option></option>').val(i).html(i)
);
}
</script>
I have the following piece of code to grab the value of a drop down list. The problem I have is that due to the onchange event attribute the first value is not passed if a user does not select an option. Is there a way I can define when there is no change the first value is passed on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
<select name="mySelect" id="mySelect" onchange="getSelectedValue();">
<option value="aaaaaaaaa.xml">Text 1</option>
<option value="bbbbbbbbb.xml">Text 2</option>
</select>
<form action="test">
Value1: <input id="myField" type="text" value=""><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
</script>
</body>
</html>
Many thanks!
set the first option as selected default
<option selected="selected" ...
and call getSelectedValue() after everything is defined
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
getSelectedValue()
</script>
i have been trying to make an script in php that allows me when i select any option on the select box then on selecting it its value gets displayed in the textfield. Kindly let me know how can i do that. I am a rookie so kindly bear my question if its stupid.
Kindly clcik on the followi8ng link for image help of my quesiton.
http://s18.postimage.org/d85l2m2nt/select_Box2.gif
If your elements are in a form, then put the following listener on the select element:
onchange="this.form.textareaName.value = this.value"
Where textareaName is the name of the textarea you want to set the value of.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slectboxid option').click(function(){
$('#textboxid').val($(this).val());
});
});
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>
use jquery,the above code snippet.it will help you.
Please Try this
<html>
<head>
<script type="text/javascript">
function assignText(obj) {
document.getElementById("textboxid").value = obj.options[obj.selectedIndex].value;
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid" onchange = 'assignText(this)'>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>