Change placeholder of input when I select Option - javascript

I have been trying out some jQuery coding but doesn't seem to work. In the #vat input, I need the placeholder to change.
<select id="VatExpense">
<option value="" disabled selected></option>
<option value="0"></option>
<option value="1"></option>
<option value="0"></option>
<option value="0"></option>
<option value="1"></option>
</select>
<input type="text" id="vat" placeholder="Rate">

You should be using data- attributes, not value to determine the rates.
Demo fiddle
HTML:
<select id="VatExpense">
<option data-rate="20" value="" disabled selected>Expense Type</option>
<option data-rate="20" value="0">Telephone</option>
<option data-rate="0" value="1">Public Transport & Taxis</option>
<option data-rate="20" value="2">Computer Consumables</option>
<option data-rate="20" value="3">Subsistence</option>
<option data-rate="0" value="4">Overseas Travel</option>
</select>
Then read them in the jQuery and change the placeholder accordingly.
Script:
<script type="text/javascript">
$(function(){
$("#VatExpense").change(function(){
$("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
});
});
</script>

You can try this:
Jquery :
$("#VatExpense").on("change", function() {
var vatExpense = $("#VatExpense option:selected").val();
var vatPlaceholder = "Rate";
if (vatExpense == 0) {
vatPlaceholder = "Standard rate 20%";
} else if (vatExpense == 1) {
vatPlaceholder = "Zero Rate 0%";
}
$("#vat").attr("placeholder", vatPlaceholder);
});
JsFiddle: http://jsfiddle.net/ghorg12110/kzmL0e1j/

You can do it like this :
(function() {
var placeholders = {
'value_':'Rate',
'value_0':'Standard rate 20%',
'value_1':'Zero Rate 0%'
};
$("#VatExpense").on('change', function(e) {
$("#vat").prop('placeholder', placeholders['value_' + $(this).val() ]);
});
})();

Try below like this Demo Here use attr()
$('#VatExpense').change(function(){
var selectedval = $(this).val();
if(selectedval == 0){
$('#vat').attr('placeholder','Standard rate 20%');
}else if(selectedval == 1){
$('#vat').attr('placeholder','Zero Rate 0%');
}
});

Related

How to hide\show specific value of option based on another selected option by JQuery?

I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?
You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!
You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out
there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>

Use old and new value on Javascript after onChange of Select element

I try to pass on a function the old and the new value of a select element with the following way:
<select class="browser-default" id="countries" onfocus="this.oldvalue = this.value;" onchange="getCurrency(this);this.oldvalue = this.value;">
<option value="" disabled selected>Choose your country</option>
<option value="1">....</option>
<option value="2">....</option>
</select>
var getCurrency = function(country) {
currency_value = country.value;
country_name = country.options[country.selectedIndex].innerHTML;
old_value = country.oldvalue;
if ( oldvalue === "") {
oldvalue = 10;
}
}
However, it doesn't work. It doesn't pass the old value to the function. I saw something similar to another question in Stackoverflow and try to reproduce it.
Try the following.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="browser-default" id="countries" onfocus="this.oldvalue = this.value;" onchange="getCurrency(this);this.oldvalue = this.value;">
<option value="" disabled selected>Choose your country</option>
<option value="1">India</option>
<option value="2">Australia</option>
<option value="3">USA</option>
</select>
<script>
var oldValue = $("#countries").val();
var newValue;
$("#countries").change(function(){
newValue=$(this).val();
alert(oldValue + " : " + newValue);
oldValue=newValue;
});
</script>

Show/hide dropdown based on Multiselect selection

I have the following HTML.
<select id="segment_c" name="segment_c[]" multiple="true" size="6" style="width:150" title="" tabindex="0">
<option label="" value="" selected="selected"></option>
<option label="Mobile1" value="Mobile1">Mobile1</option>
<option label="Mobile2" value="Mobile2">Mobile2</option>
<option label="Mobile3" value="Mobile3">Mobile3</option>
</select>
<select name="Mobile1_c" id="Mobile1_c" title="">
<option label="" value=""></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile2_c" id="Mobile2_c" title="">
<option label="" value="" selected="selected"></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile3_c" id="Mobile3_c" title="">
<option label="" value=""></option>
<option label="Motorola" value="Motorola">Motorola</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
This is a Multiselect List
I needed help in jQuery in the following.
I would like to iterate the multiselect (id="segment_c") such that if value="Mobile1" and value="Mobile2" and value="Mobile3" is selected then show dropdown with id="Mobile1_c" and id="Mobile2_c" and id="Mobile3"
Basically show/hide dropdown based on value selected in multiselect.
Thanks in advance.
John
Notice that values from multiple select are stored inside an array.
$(document).ready(function () {
function hideAll() {
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').hide();
}
hideAll();
$('#segment_c').change(function() {
hideAll();
var val = $(this).val();
if (val == "") {
hideAll();
} else {
for (var i = 0; i <= val.length; i++) {
$('select[name*="' + val[i] + '"]').show();
}
}
});
});
http://jsfiddle.net/4nuAW/2/
#Freak_Droid almost has it but I can't comment for lack of rep.
with that implementation you don't need all three selected as requested
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').toggle();
$('#segment_c').change(function(){
//val returns an array not a jquery object so dont prefix with a $
var val = $(this).val();
//you may want a more robust check here
if(val.length === 3){
$('#Mobile3_c').show();
}else{
$('#Mobile3_c').hide();
}
});
http://jsfiddle.net/VuN78/1

how to disable <select> based on user selection in another <select>

i have two <select>, named category and category_sport
i want <select name='category_sport'> disable , if i click <option>sport</option> in <select name='category'> , i want enable <select name='category_sport'>
Anyone have an idea how ?
function disable()
{
document.getElementById("katOl").disabled=true;
}
function enable()
{
document.getElementById("katOl").disabled=false;
}
the script above is used in <option> ex:
<select name='category'>
<option value="1" onclick='enable()' >sport</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
but isn't work
try something like this
javascript
function check(val)
{
if(val == '1'){
document.getElementById("katOl").disabled=true;
}else{
document.getElementById("katOl").disabled=false;
}
}
html
<select name='category' onchange="check(this.value)">
<option value="" >SELECT</option>
<option value="1" >sport</option>
</select>
assuming that your looks like this :
<select name='category_sport' id="katOl"> ... </select>
HTML:
<select id="myselect" name='category' onchange="changeSelect()">
<option value="1">sport</option>
</select>
Javascript:
function changeSelect(){
var mySelect = document.getElementById("myselect");
var selectedValue = e.options[myselect.selectedIndex].value;
if(selectedValue=="1") //sport
{
document.getElementById("katOl").disabled=false;
}
}
try like this
$("#category").change(function(){
if($(this).val()=="yourvalue"){
disable();
}else{
enable();
}
});
You can try this:
$(document).ready(function(){
$('select[name=category]').change(function(){
if($(this).val() === '1'){
$('#katOl').prop('disabled', false);
} else {
$('#katOl').prop('disabled', true);
}
});
});
DEMO Link
use onChange event of select tag instead.
<select onChange="set_sport_cat(this)">
<option value="1">sport</option>
<option value="2">whatever</option>
</select>
function set_sport_cat(my){
alert("test");
if(my.options[0].selected){
alert("1");
}else{
alert("2");
}
}
http://jsfiddle.net/3A6X4/
HTML CODE:
<select name='category' id="category">
<option value="1">sport</option>
<option value="2">education</option>
</select>
<select id='katOl' name='category_sport'>
<option value="1">Football</option>
</select>
js Code:
(function(){
var cat = document.getElementById('category'),
katOl = document.getElementById('katOl');
cat.onchange = function() {
var v = cat.value;
if(v === '1') {
katOl.setAttribute('disabled', 'disabled');
} else {
katOl.removeAttribute('disabled');
}
}
})();
A much simpler and fun approach:
LIVE DEMO
<select name='category'>
<option>Sport</option>
<option>Food</option>
<option>Travel</option>
</select>
<select name='category_sport'>
<option>Football</option>
</select>
<select name='category_food' disabled>
<option>Pizza</option>
</select>
<select name='category_travel' disabled>
<option>Croatia</option>
</select>
jQuery:
$('select[name=category] option').click(function(){
var val = this.value.toLowerCase(); // "Sport" >> "sport"
$('select[name^=category_]').prop('disabled', 1); // Disable all
$('select[name=category_'+ val +']').prop('disabled', 0); // Enable
});
Here is my solution:
HTML:
<select name="category" onchange="alterSelection(event)">
<option value="">----</option>
<option value="1">Sport</option>
<option value="2">Food</option>
</select>
<select id="katOl" name="category_sport" disabled="disabled">
<option value="1">Football</option>
<option value="2">Cricket</option>
</select>
JS:
function alterSelection(e){
if( e.target.selectedIndex==1 ){
document.getElementById("katOl").disabled=false;
}else{
document.getElementById("katOl").disabled=true;
}
}

how to make select box dynamic

I've three select-box here to choose Format, Amount & Shipping type. After selection, it will calculate price automatically.
here, how those select-box look like:
<p>Format: <select class="calculate" name="format">
<option value="0">Please Select</option>
<option value="0">Format 1</option>
<option value="0">Format 2</option>
</select></p>
<p>Amount: <select class="calculate" name="amount">
<option value="0">Select amount</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
currently, the Amount for the both Format (Format 1/Format 2) are same.
what i'm trying to do is like: for the Format 1, the current Amount will remain same, but if user select Format 2 then the Amount will something like this:
<option value="0">Select amount</option>
<option value="300">250pcs</option>
<option value="350">1,000pcs</option>
<option value="400">2,500pcs</option>
where the value is different! how can i achive this?
here goes the JSfiddle
Thanks in advance for any help!
You should first set the new values in an array. So you can loop through them while changing the first select.
Then you can easily get the options from the 2nd select, and update them with the correct new values:
$(".calculate, #surcharge").on("change", function(){
if($(this).val() == 1)
{
var amountValues = new Array(0,250,400,500);
$("#menge option").each(function(key,value)
{
$(this).val(amountValues[key]);
});
} else if($(this).val() == 2)
{
var amount Values = new Array();
// .....
}
});
http://jsfiddle.net/7Bfk5/15/
You can do this by checking the text() in the options you are selecting
if ($('#sel option:selected').text() === 'Format 2') {
$('#amt option').each(function () {
alert($(this).text());
if ($(this).text() == "250pcs") $(this).val("300");
else if ($(this).text() == "1,000pcs") $(this).val("350");
else $(this).val("400");
});
}
working fiddle
You can create a function that does values/options replacement and call it on your select changes.
I did an example for you but used static html options to replace old ones, this might not be the best way but tried to keep it as simple as possible.
HTML
<p>Format: <select class="calculate format" name="format">
<option value="0">Please Select</option>
<option value="1">Format 1</option>
<option value="2">Format 2</option>
</select></p>
<p>Amount: <select class="calculate amount" name="menge">
<option value="0">Select Menge</option>
<option value="247">250pcs</option>
<option value="279">1,000pcs</option>
<option value="389">2,500pcs</option>
</select></p>
<p>Shipping type: <select id="surcharge" name="shipping">
<option value="0">Select Shipping</option>
<option value="10%">Standard</option>
<option value="15%">Express</option>
</select></p>
<p>Price: <span id="total">0 €</span></p>
Javascript
var updateValues = function (){
if($('.format').val() == 1) {
html = '<option value="300">300pcs</option>';
html += '<option value="400">400pcs</option>';
html += '<option value="500">500pcs</option>';
$('.amount').html(html);
} else if( $('.format').val() == 2) {
html = '<option value="600">600pcs</option>';
html += '<option value="900">900pcs</option>';
html += '<option value="1200">1200pcs</option>';
$('.amount').html(html);
}
};
$('.format').change(function(){updateValues()});
$(".calculate, #surcharge").on("change", function(){
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
if($('#surcharge').val() != 0) {
total = total * ((100 + parseFloat($('#surcharge').val())) / 100);
}
$('#total').text(total.toFixed(2) + ' €');
});
Fiddle link
http://jsfiddle.net/7Bfk5/23/

Categories