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>
Related
There is some JS code which should count an amount from given data-id.
I climbed a lot, but didn’t find an answer how to do it, maybe there’s a person who can help me.
Values were repeated only 1 time.
The amount was made up of data-id.
And the total amount was displayed to be entered in the database.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<select id="goods" onchange="func()" size="4">
<option value="-">--</option>
<option value="milk" dataid="10">milk</option>
<option value="banana" data-id="12">banana</option>
<option value="apple" data-id="13">apple</option>
</select>
<br>
Сумма: <span id="summ">0</span>рублей<br>
<select id="go" onchange="fu()" size="4">
<option value="-">--</option>
<option value="milk" dataid="100">milk</option>
<option value="banana" data-id="120">banana</option>
<option value="apple" data-id="130">apple</option>
</select>
<br>
Сумма: <span id="sum">0</span>рублей<br>
Было выбрано:<br>
<span id="list"></span>
Общая сумма равна: <span id="test4" name="test4">0</span>рублей<br>
<script>
function func() {
if (goods.selectedIndex) {
summ.innerText = +summ.innerText + +goods.options[goods.selectedIndex].value;
list.innerHTML += goods.options[goods.selectedIndex].text + '<br>';
}
}
function fu() {
if (go.selectedIndex) {
sum.innerText = +sum.innerText + +go.options[go.selectedIndex].value;
list.innerHTML += go.options[go.selectedIndex].text + '<br>';
}
}
</script>
</body>
</html>
Im not quite sure what you are trying to do but I guess you're trying to display the value of data-id (Summa: [data-id] rub).
You can achieve it like this:
summ.innerText = +summ.innerText + +goods.options[goods.selectedIndex].getAttribute('data-id');
I'm new to JavaScript. Trying to build, for practice, a simple unit converter kind of like the one that google uses for converting kilos to pounds, inches to meters, etc.
I'd like to have an input box for entering the number value.
After that, two lists in the HTML files so i can choose in first the unit i convert from; and on the second the unit i convert to.
Maybe is an obvious one but i have not been able to find an answer to this problem. I'll post the last code/approach i tried.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="simpleweightconversortest.js"></script>
</head>
<body>
<form>
<!-- Select 1-->
<label>From:</label>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="kilograms1">Kilograms</option>
<option value="grams1">Grams</option>
<option value="miligrams1">Miligrams</option>
</select>
<!-- Select 2-->
<label>To:</label>
<select name="converts2" id="Selection2">
<option>Chose Option</option>
<option value="kilograms2">Kilograms</option>
<option value="grams2">Grams</option>
<option value="miligrams2">Miligrams</option>
</select>
<!--INPUT-->
<br>
<br>
<br>Value
<input type="number" id="value" placeholder="Insert value">
<!--RESULT -->
<br>Conversion
<input type="text" id="convertedOuput">
<br>
<br>
<input type="Button" onclick="Conversion()"
value="convert">
</form>
</body>
</html>
var val = document.getElementById("value").value;
var convertedOuput =document.getElementById("convertedOuput");
var selectFrom = document.getElementById("Selection");
var selectTo = document.getElementById("Selection2");
var madeSelection_1 = selecFrom[selectFrom.selectedIndex].value;
var madeSelection_2 = selectTo[selectTo.selectedIndex].value;
function Conversion() {
if (madeSelection_1 == "kilograms1" && madeSelection_2 == "kilograms2") {
var result = val * 1;
document.getElementById('convertedOuput').innerHTML = result;
}
}
I'm not getting any output in my "conversion" input box.
What am i doing wrong ? (i'm sure almost everything) Please help.
document.getElementById('convertedOuput').value = result should display the result of your function.
You have a typo:
var madeSelection_1 = selecFrom[selectFrom.selectedIndex].value;
This should be selectFrom and not selecFrom.
Also, you need to set the value of the input field using convertedOuput.value = result instead of setting its innerHTML. (By the way, convertedOuput is also misspelled, should be convertedOutput, but it's consistent, so it should work anyway.)
And finally, you are checking the selected units outside of the conversion button click handler, so they won't be updated when the user changes the selections in the dropdown. Move the corresponding lines which set value, convertedOuput and madeSelection_1 and madeSelection_2 into the Conversion function. (Explanation: Right now, the code is run once upon page load, so the values loaded there will always be the an empty string coming from the Choose option option. Afterwards, this part is run every time the button is clicked, so the values will be up to date.)
It works now:
function Conversion() {
var val = document.getElementById("value").value;
var convertedOutput = document.getElementById("convertedOutput");
var selectFrom = document.getElementById("Selection");
var selectTo = document.getElementById("Selection2");
var madeSelection_1 = selectFrom[selectFrom.selectedIndex].value;
var madeSelection_2 = selectTo[selectTo.selectedIndex].value;
if (madeSelection_1 == "kilograms1" && madeSelection_2 == "kilograms2") {
var result = val * 1;
convertedOutput.value = result;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="simpleweightconversortest.js"></script>
</head>
<body>
<form>
<!-- Select 1-->
<label>From:</label>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="kilograms1">Kilograms</option>
<option value="grams1">Grams</option>
<option value="miligrams1">Miligrams</option>
</select>
<!-- Select 2-->
<label>To:</label>
<select name="converts2" id="Selection2">
<option>Chose Option</option>
<option value="kilograms2">Kilograms</option>
<option value="grams2">Grams</option>
<option value="miligrams2">Miligrams</option>
</select>
<!--INPUT-->
<br>
<br>
<br>Value
<input type="number" id="value" placeholder="Insert value">
<!--RESULT -->
<br>Conversion
<input type="text" id="convertedOutput">
<br>
<br>
<input type="Button" onclick="Conversion()" value="convert">
</form>
</body>
</html>
Note that you would have found a hint to these things more easily if you had looked into your browser's devtools - there you'd have seen an error about selecFrom.
Try pressing F12 in your browser. :-)
Furthermore, in the devtools you can do many powerful things to debug and analyze your code, such as executing arbitrary code at runtime, inspect variables, single-step through your lines of code, etc.
I'd recommend you to watch the Google Chrome Devtools Crash Course video on YouTube to get started!
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>
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>
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>