I want to have a dependent numeric input.
This numeric input depends on a select box that creates a specific numeric range for the input by selecting each option.
For example:
if we select option2, the numeric input will be min = 20 and max = 50!,
if we select option3, the numeric input will be min = 10 and max = 30!.
How can such a feature be created?
Here's what I've tried:
<form>
<select id="selbox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<input type="number" id="num">
<button>click</button>
</form>
You can achieve this in JavaScript by adding a change EventListener to the select tag which will help you extract the range values selected. Then you set those as min and max attributes for the input.
const select = document.querySelector("#selbox");
const textBox = document.querySelector("#num");
select.addEventListener("change", setRangeForInput);
function setRangeForInput() {
const [rangeMin, rangeMax] = select.value.split('-'); //this is ES6 destructuring syntax
textBox.setAttribute("min", rangeMin);
textBox.setAttribute("max", rangeMax);
}
<form>
<select id="selbox">
<option value="20-40">option1</option>
<option value="30-50">option2</option>
<option value="3-7">option3</option>
</select>
<input type="number" id="num">
<button>click</button>
</form>
Maybe it is good idea to using libraries that allow you to display fields depending on the selection of others: dependsOn
Related
I have a form in the CMS which has only one input (text type) and I cannot add additional fields to it (I don't have access to the DB), so what I want is to create select options near the field and add selected options values to the input field.
Let say I have this code:
<input type="text" placeholder="Your name" />
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
And this is how it must display after submition. The form submits the posts and works fine. This select tags should not touch any DB part or anything else. It only needs to get the values, insert to that inout text field and then show it.
And is it possible to show the values in special order like this?:
Name: Bla Bla
Age: 18
Height: 180 cm
Or at least like this:
Bla Bla, age 18 years old, height 180 cm
How can I do this using JavaScript or jQuery?
By the way my APP works based on nodeJS and MongoDB.
Thanks in advance.
Are you trying to get all of the fields to get added to the name field? It would be a good idea to create another input for the name and give it a unique identifier to distinguish it from the other input where you will be adding all of the information to.
I would create a function that handles transfering the values from your input and select fields to the input field provided. I would call this function on submit, adding the values to the provided input before the form submission.
Here it is on Codepen:
https://codepen.io/MattStillwater/pen/pogVeRp
This is the setField() function that I created for adding the values to the provided field:
function setField() {
var nameVal = jQuery('#yourName').val() +', ';
var ageSelectVal = jQuery('#yourAge').val() +', ';
var heightSelectVal = jQuery('#yourHeight').val();
var inputField = jQuery('input[type=text]').not(document.getElementById('yourName'));
inputField.val(nameVal + ageSelectVal + heightSelectVal);
}
This is the HTML that I am using:
<div class="section" id="yourField">
<input type="text" placeholder="Your name" id="yourName" />
<select id="yourAge">
<option>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
</div>
<form action="#" class="section" id="formFields">
<input type="text" /> <!-- The endpoint -->
<input type="submit" value="Submit" />
</form>
The function is being called on submit event:
jQuery('input[type=submit]').submit(function() {
setField();
});
Welcome to SO, this is not a writing service website, so please next time do your own research first and ask when you get stuck. Combination of this things I wrote is all over this website with examples.
You could have searched for exactly what you need:
-How to get values of HTML elements.
-How to add values to elements.
-How to do this on some event.
var input = document.getElementById("in");
var sel1 = document.getElementById("yourAge");
var sel2 = document.getElementById("yourHeight");
sel1.onclick = function(){
sel1 = document.getElementById("yourAge");
var selected = sel1.options[sel1.selectedIndex].value;
input = document.getElementById("in");
input.value="Name: "+input.value+", Age: "+selected;
};
sel2.onclick = function(){
sel2 = document.getElementById("yourHeight");
var selected = sel2.options[sel2.selectedIndex].value;
input = document.getElementById("in");
input.value=input.value+", Height: "+selected;
};
<input type="text" id="in" placeholder="Your name" size="35"/>
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
I'm trying to create a calculator-like program that takes the number you enter into the first input field and divides it by the number in the dropdown field below it. I'm trying to get a specific percentage of whatever number is entered in the first field.
However, I keep getting "NaN" when it runs. What should I change?
const number = document.getElementById('number');
const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');
//The mathematical stuff
submitButton.addEventListener('click', () => {
alert(number * percentageSelector);
});
<h2>Enter number here</h2>
<input type="number" id="number">
<h2>Select a percentage to divide by</h2>
<select id="percentageSelector">
<option selected disabled>Pick one</option>
<option>1%</option>
<option>2%</option>
<option>3%</option>
<option>4%</option>
<option>5%</option>
<option>6%</option>
<option>7%</option>
<option>8%</option>
<option>9%</option>
<option>10%</option>
</select>
<button type="submit" id="submitButton">Submit</button>
The following code ensures that the value of the inputs only get checked when the button is clicked. Values have also been added to each option and the value of the percentageSelector is checked using percentageSelector.selectedOptions[0].value.
I have also made a jsfiddle.
const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');
//The mathematical stuff
submitButton.addEventListener('click', () => {
const number = document.getElementById('number').value;
const percentage = percentageSelector.selectedOptions[0].value;
alert(number * percentage);
});
<h2>Enter number here</h2>
<input type="number" id="number">
<h2>Select a percentage to divide by</h2>
<select id="percentageSelector">
<option selected disabled>Pick one</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.1">10%</option>
</select>
<button type="submit" id="submitButton">Submit</button>
This const percentageSelector = document.getElementById('percentageSelector'); sets percentageSelector to the element not the value of the element. (Ditto "number").
Since the operands are set outside the click function, they will have the values as when the page loaded. You probably want to collect that info after the click, ie inside the function.
The value of a select element is the option that has been selected. The value is going to be the value attribute of the option. But none of the options has a value. Once you add values (as with <option value=".01">, it should be able to "do the math".
so simple.. take care to use numbers and not string values
const numberIn = document.getElementById('number-in')
, percent = document.getElementById('percentage-Selector')
, btCompute = document.getElementById('submit-Button')
;
btCompute.onclick=()=>
{
console.log('percent=', numberIn.valueAsNumber *Number(percent.value) /100)
}
<h2>Enter number here</h2>
<input type="number" id="number-in">
<h2>Select a percentage to divide by</h2>
<select id="percentage-Selector">
<option selected disabled>Pick one</option>
<option value="1">1%</option>
<option value="2">2%</option>
<option value="3">3%</option>
<option value="4">4%</option>
<option value="5">5%</option>
<option value="6">6%</option>
<option value="7">7%</option>
<option value="8">8%</option>
<option value="9">9%</option>
<option value="10">10%</option>
</select>
<button id="submit-Button">Submit</button>
I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.
My code is like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">0</option>
<option value="s">24</option>
<option value="d">25</option>
</datalist>
My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here:
After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.
If I do something like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">DUMMY1</option>
<option value="s">s</option>
<option value="d">d</option>
</datalist>
I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.
You can make use of data attribute to find the id of option clicked from the list and keep value as labels,
see below code
$(function(){
$('#selectClassInput').on('change', function(e){
var val = $(this).val();
var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
console.log(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1" data-id="0">DUMMY1</option>
<option value="s" data-id="24">s</option>
<option value="d" data-id="25">d</option>
</datalist>
I'm a little new to JS.
I'm attempting to take 3 text fields and add them and then multiply their value by a drop down field with a percentage in it. Once that's done I want it to populate the final text field with a value.
So far I haven't even been able to get the text to display in the final field much less add it together. I'd appreciate it if anyone could help point me in the right direction.
Our Buying Cost:
<input id="buying_cost" name="buying_cost" type="text" />
<br/>Our Shipping Cost:
<input id="shipping_cost" name="shipping_cost" type="text" />
<br/>Our Tax Cost:
<input id="tax_cost" name="tax_cost" type="text" />
<br/>Our Markup:
<select id="markup" name="markup" value="">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<br/>
<p>New Selling Price:</p>
<input type="text" id="new_sell_price" name="new_sell_price" value="">
$("#buying_cost,#shipping_cost,#tax_cost,#markup).change(function ()
{
var addressArray = [$("#buying_cost").val(), $("#shipping_cost").val(), $("#tax_cost").val(), $("#markup").val()];
$("#new_sell_price").text(addressArray.join(' '));//<--I would like this to be adding all the values
}
);
I've included the work here at this JSFiddle
jsfiddle.net/new2programming/hy99yu2m/
Thanks for any help!
Here a clean and simple solution for your problem: on JSFiddle
But pay attention, you should not copy-paste this code if you don't really understand what exactly it does!
First of all, register the events:
// I recommend jQuery.on(...) on the document
$(document).on('input', 'input', calculate);
$(document).on('change', 'select,input', calculate);
// use the 'input' event for a live update
// and the 'change' value for a secure update
(You can replace 'input' and 'select,input' with the jQuery-selector of your elements if you want so, read the documentation)
In the next step, you fill your array with all your values:
var values = [
$("#buying_cost").val(),
$("#shipping_cost").val(),
$("#tax_cost").val(),
$("#markup").val()
];
Now you can addition all the values in the array:
var total = eval( values.join('+') );
// the eval function calculates the given string (generated by the join function)
And for the last step, you set the calculated value:
$("#new_sell_price").val(total);
// use 'val(...)' and not 'text(...)' because you want to set the value and not the text!
If you wanted to change the value of the hidden field to something not in the value of the dropdown like so
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo">One - 42</option>
<option value="bar">Two - 40</option>
<option value="wig">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
And i want to pass (if two selected) dropdown="bar" and hiddenInput="40"
The value has to be passed but needs to effect the hiddenfield.
What do you think? Would you need to If then? or could you have it something like
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo" onchange="set hiddenInput - 42">One - 42</option>
<option value="bar" onchange="set hiddenInput - 40">Two - 40</option>
<option value="wig" onchange="set hiddenInput - 38">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
You have the right idea with the onchange attribute. Your function could look like:
function changeHiddenInput(mySelect) {
var map = {foo: "42", bar: "40", wig: "38"};
var index = mySelect.selectedIndex;
var value = mySelect.options[index].value;
var hiddenInput = document.getElementById("hiddenInput");
hiddenInput.value = map[value];
}
The map variable there maps each option's value on to what the hidden attribute should be set to.
I'd keep the mapping on the server rather then trying to handle it client side.
Forget the hidden input. Just look up the value based on the value of the dropdown after the data reaches the server.
Unfortunately, you'd need the IF statement. You can use the onclick event for the option tags in Firefox and probably other browsers, but in IE you can't set any events on the option elements, only on the select element.