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">
Related
I have the select below and I want to pass its selected value based on the option's name (color), inside an input field using jQuery but it doesn't work.
What am I doing wrong?
$(document).ready(function() {
$('#select_color_id option[name="color"]').on('change', function() {
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
First option tag does not have change event. But you can get selected option and check the name to see if it is color or not:
$(document).ready(function() {
$('#select_color_id').on('change', function(e) {
var optionSelected = $(this).find("option:selected")[0];
console.log(optionSelected.getAttribute("name"))
if(optionSelected.getAttribute("name") === "color"){
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
If search-add is always going to be the only thing you don't want to appear then you can just do a check for it, then otherwise set the value of your search-query input field to your selectedoption variable:
$(document).ready(function() {
$('#select_color_id').on('change', function() {
var selectedoption = $('#select_color_id').val();
if (selectedoption == 'search-add') {
return;
}
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
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 have a dropdown selector in my HTML and I need to print out an image that is linked to a selection. But I have no idea how to start that.
<input type="text" id="TextVeld" class="form-control" placeholder="get value on option select">
<br><br>
<select name="cars" id="TextShow" class="form-control">
<option value="Pizza0">Kies je pizza</option>
<option value="Pizza1">Margherita</option>
<option value="Pizza2">Carciofi</option>
<option value="Pizza3">Marinara</option>
<option value="Pizza4">Funghi</option>
<option value="Pizza5">Calzone</option>
<option value="Pizza6">Napoli</option>
<option value="Pizza7">Romana</option>
<option value="Pizza8">Quattro Formaggi</option>
</select>
<br><br>
<button type="button" name="button">Toon</button>
<button type="button" name="button" onclick="Kiezen()">Kies</button>
I did find an example that does this, but not on a button click. Even then, it doesn't work when I add it to my code.
Assuming "Print out" means "Show", try this
var folder = "https://icco.co.uk/catalog/view/theme/iccqtheme/images/"
function showIt() {
var pizza = document.getElementById("pizzas").value;
document.getElementById("pizzaImage").src= folder + (pizza? pizza+".png" : "deliveroo.png");
}
window.addEventListener("load",function() {
document.getElementById("toon").addEventListener("click",showIt); // click
document.getElementById("pizzas").addEventListener("change",showIt); // or change
});
<input type="text" id="TextVeld" class="form-control"
placeholder="get value on option select">
</br></br>
<select name="pizzas" id="pizzas" class="form-control">
<option value="">Kies je pizza</option>
<option value="piza1">Margherita</option>
<option value="piza2">Carciofi</option>
<option value="piza3">Marinara</option>
<option value="piza4">Funghi</option>
<option value="piza5">Calzone</option>
<option value="piza6">Napoli</option>
<option value="piza7">Romana</option>
<option value="piza8">Quattro Formaggi</option>
</select>
</br></br>
<button type="button" id="toon">Toon</button>
<button type="submit" name="button">Kies</button><br/>
<img id="pizzaImage" src="https://icco.co.uk/catalog/view/theme/iccqtheme/images/deliveroo.png" />
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 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>