I have a select box to which I have a value against the options, I also want another value based on the selection.
My select:
<select class="form-control input-lg" id="credits">
<option value="1" price="2">1 Credit</option>
<option value="10" price="4">10 Credits</option>
<option value="25" price="6">25 Credits</option>
<option value="50" price="8">50 Credits</option>
<option value="100" price="10">100 Credits</option>
<option value="200" price="12">200 Credits</option>
</select>
<button id="top">Apply</button>
My Javascript looking for the value of select:
$(document).on('click', 'button#top', function(e) {
e.preventDefault();
var credits = $('select#credits').val();
var value = $('select#credits').val($('option:selected').data('price'));
});
At the moment all I get on alert() is Object[Object]
Can anyone tell me where I'm going wrong?
val() will only get (or set) the actual value; never price or any other attribute.
And if you're going to use jQuery's data() method, you need to use data-* attributes.
Finally, there's no need to include the tag name (e.g. select) when using an id. ids are unique.
With that in mind:
$(document).on('click', '#top', function(e) {
e.preventDefault();
var credits = $('#credits').val();
// the + makes sure we get a numeric value
var value = + $('#credits option:selected').data('price');
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control input-lg" id="credits">
<option value="1" data-price="2">1 Credit</option>
<option value="10" data-price="4">10 Credits</option>
<option value="25" data-price="6">25 Credits</option>
<option value="50" data-price="8">50 Credits</option>
<option value="100" data-price="10">100 Credits</option>
<option value="200" data-price="12">200 Credits</option>
</select>
<button id="top">Apply</button>
target the selected option using $('select#credits option:selected') and then get the attribute price using .attr('price')
$(document).on('click', 'button#top', function(e) {
e.preventDefault();
var credits = $('select#credits').val();
var value = $('select#credits option:selected').attr('price');
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg" id="credits">
<option value="1" price="2">1 Credit</option>
<option value="10" price="4">10 Credits</option>
<option value="25" price="6">25 Credits</option>
<option value="50" price="8">50 Credits</option>
<option value="100" price="10">100 Credits</option>
<option value="200" price="12">200 Credits</option>
</select>
<button id="top">Apply</button>
Related
I have this simple bit of code. When the user chooses Others, an <input type=text> should appear.
But it only works when there is only one value selected.
Users can randomly add in the same select type, so the code can't be changed. For what I know, in javascript need to use foreach.
So my question is, how to let each of the <input type=text> appear in EACH of the select elements instead of it only appearing in the first one.
function Pack(val){
var element=document.getElementById('otherpack');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
Here is my solution:
function Pack(v) {
var inputBox=v.nextSibling;
var selectedValue=v.options[v.selectedIndex].value;
if (selectedValue=="others") {
inputBox.style.display='block';
} else {
inputBox.style.display='none';
}
}
This should be the most stable solution.
I would prefer to make change events into javascript side instead of making it in HTML..
As suggested it is not good to use input inside select so make input outside of select box..
const selectBoxes = document.querySelectorAll('select');
function Pack(select) {
const selectedInput = select.nextElementSibling;
if(select.value === 'others')
selectedInput.style.display='block';
else
selectedInput.style.display='none';
}
selectBoxes.forEach(select => {
select.addEventListener('change', Pack.bind(this, select))
})
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
id attributes should have unique values, so your selector will always select the first match.
Secondly, input elements are not allowed to be children of select elements. select elements can only have optgroup or option elements as children
It is also best practice to attach listeners via JavaScript code instead of onchange attributes. You can listen at the document level ("event delegation") to avoid repeating several listeners (one per select element).
Here is how it could work:
function Pack(e){
let select = e.target;
if (select.name !== "Type[]") return;
let element = select.nextElementSibling; // this finds the INPUT element
element.style.display = select.value === "others" ? "block" : "none";
}
document.addEventListener("change", Pack);
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
Have you tried giving them unique ids? if you wanna have the same identifier in different elements, maybe use the class attribute instead.
Hope it helps, good luck !
edit: actually, now I see you're calling them with an id that isn't unique. Give each of the text-inputs their own id and it should work
ids are meant to be unique in the code, so whenever you call your function it assumes that there is only one element with that id
I am new to javascript and I want to use the select option to list each selected value in the input tag.
I have tried to use javascript to show the selected value but when I select for the second time the first value dismiss and show the second selected. I was expected to show each selected value in the input tag separately without dismissing other previous selected.
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
document.getElementById("myValues").innerHTML = selectedValue;
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">
I expected the output of
<input type="text" name="value[]" id="myValue" value="Option1">
<input type="text" name="value[]" id="myValue" value="Option3">
thus in the input should show
Option1
Option3
You can do something like that if you want to use Jquery.
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if(selectedValue) {
var html ='<input type="text" name="value[]" id="myValue" value="'+selectedValue+'"> <br>';
$('.inp').append(html);
$('.default').remove();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<div class="inp">
<input type="text" name="value[]" id="myValue" value="" class="default">
</div>
I dont know what you really expect, but I think this solution can be helpful to you. checkout the snippet.
First get the value and then append to the existing value
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
var _optionSelected = document.getElementById("myValue").value;
_optionSelected.length ? document.getElementById("myValue").value += ', '+selectedValue : document.getElementById("myValue").value += selectedValue;
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">
Im not entirely sure I understand you 100%, but if I do i think you want to be able to see all of the selected values in the input box? That you have selected, ever! If so:
var values = []
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if (values.indexOf(selectedValue) === -1) { //prevents duplicate values
values.push(selectedValue)
}
document.getElementById("myValues").setAttribute('value', values.join(' '))
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValues" value="">
You can use Select2 jQuery plugin for that.
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
width: '100%'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<select class="js-example-basic-multiple" name="options[]" multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
You can add a new input to the div with the selected value
var selectedValues = [];
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if( !selectedValues.includes(selectedValue) ){
selectedValues.push(selectedValue);
document.getElementById("myValues").innerHTML +=
'<input type="text" name="value[]" id="myValue" value="' + selectedValue + '"></br>';
}
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<div id="myValues">
</div>
I have a dropdown of options that when one otion is clicked it sets "Value" in vue to a specified ammount. Then I dispaly the selected ammount in an input. Example:
<select class="form-control" style="max-width: 150px;">
<option value="hideMe" selected="true" disabled="disabled" >Select value...</option>
<option value="10" #click="Value = 10">Buy 10</option>
<option value="20" #click="Value = 20">Buy 20</option>
<option value="50" #click="Value = 50">Buy 50</option>
<option value="100" #click="Value = 100">Buy 100</option>
<option value="500" #click="Value = 500">Buy 500</option>
<option value="1000" #click="Value = 1000">Buy 1000</option>
</select>
<input type="number" class="form-control" id="ammount" v-model="Value" name="Amount">
It all works on my desktop but when I test it on my phone (android) it won't work. I use another vue to calculate the value of "Value" and that works on mobile and desktop.
What can I do for it to work on both mobile and desktop?
use #click.native="value = 100". (only working with components)
But better way is to use v-model on select and not define #click on options.
I have input field with arrow (up, down). Next to it I have two buttons, + and -. When I click on the input field and then click the arrow the system gets the value from dropdown list. This is ok. But when I click the second one the system doesn't get the value from the dropdown list but he add 1 value. Where is the problem?
$(document).ready(function() {
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Dropdownlist above product name: http://prestashop.suszek.info/pl/summer-dresses/printed-summer-dress
You need to add a event listener to select so that min is updated every time dropdown is selected.
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onChange='group_psoft_onChange()'>
In javacript add the code to change value of min inside function group_psoft_onChange()
$(document).ready(function() {
function group_psoft_onChange(){
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
}
});
As Rohit Agrawal Jquery solution works well, this is a JavaScript version of the answer because you tagged JavaScript.
Shorter version
function dropdownChanged(d){
document.getElementById("quantity_wanted").value = d.value;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onchange="dropdownChanged(this)">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Other option
var d = document.getElementById("group_psoft");
d.addEventListener("change",dropdownChanged);
function dropdownChanged(){
var dropdownValue = d.options[d.selectedIndex].value;
document.getElementById("quantity_wanted").value = dropdownValue;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
I have a drop down which lists several countries and I want to display only a few countries depending on some conditions.
jquery is as below:
function form_onLoad() {
var countries = "";
if(document.forms[0].countries_new) {
countries = document.forms[0].countries_new.value;
}
}
Dropdown :
<select name="country" size="1">
<option value=""></option>
<option value="1" >Afghanistan</option>
<option value="2" >Albania</option>
<option value="3" >Algeria</option>
<option value="4" >Andorra</option>
<option value="5" >Angola</option>
<option value="6" >Antigua & Deps</option>
<option value="7" >Argentina</option>
<option value="8" >Armenia</option>
<option value="9" >Australia</option>
<option value="10" >Austria</option>
<option value="11" >Azerbaijan</option>
<option value="12" >Bahamas</option>
</select>
Inside the jquery, I want to replace the existing dropdown(above) which has all countries with the countries variable which has only a few options.
You can use JQuery library to achieve it
$('select[name="country"]').find('option').each(function(){
if($(this).text()=='Armenia' || $(this).attr('value')=='12'){
$(this).remove(); //It will remove Armenia and Bahamas
}
});