I want to reveal a link when a certain dropdown option is selected in a html5 form.
On page load I want to remove the link with id "pension-faq-icon" and only display it if the user selects <option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option>
Html:
<div class="seven columns">
<div class="select-holder icon icon_select">
<select name="user[user_subtype]" id="user_lender_type">
<option value="">Select type</option>
<option value="<%= User::LENDER_TYPE_INDIVIDUAL %>" id="select-ind">Individual Lender</option>
<option value="<%= User::LENDER_TYPE_PENSION_INDIVIDUAL %>" id="select-ind-pension">Individual Pension Account</option>
<!--<option value="sme" id="select-sme">Investment Business</option>-->
</select>
</div>
<p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">Need help? Read Our Pensions FAQ</p>
</div>
js file:
var user_type = $("#user_user_type").val();
var option_type = $("#select").val();
if(user_type == 'lender') {
$('#pension-faq-icon').addClass('display-none');
}
if (option_type == 'individual_pension_lender'){
//$('#pension-faq-icon').removeClass('display-none');
console.log(option_type);
}
Right now the code above is successfully not displaying the line with the id "pension-faq-icon". How can I add it again if the user selects the specific dropdown option mentioned above?
To make this work you need to attach a change event handler to the select which runs whenever the user selects an option. At the moment your logic only executes when the page loads.
Also note that you can simplify the process by providing a boolean to toggle() which specifies whether to hide or show the relevant element. Try this:
$('#user_lender_type').change(function() {
$('#pension-faq-icon').toggle($(this).val() == 'individual_pension_lender');
});
#pension-faq-icon {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="seven columns">
<div class="select-holder icon icon_select">
<select name="user[user_subtype]" id="user_lender_type">
<option value="">Select type</option>
<option value="lender" id="select-ind">Individual Lender</option>
<option value="individual_pension_lender" id="select-ind-pension">Individual Pension Account</option>
</select>
</div>
<p class="icon icon_info form-help-pension-faq show" id="pension-faq-icon">
Need help?
Read Our Pensions FAQ
</p>
</div>
Related
I have page with multiple drop down menus for employees to select a sales package, these drop down menus are completely identical.
Now when a user selects a sales package say packageA, it prefills a field on the page with the default amount for that package say $100. In the next dropdown packageA is available for selection again. In this next dropdown if a user selects PackageB it prefills the amount with the previous dropdowns value of $100, which is not the correct package price? Basically the money value autofill is only working with the first dropdown selection box on the page. Whatever is selected in the first dropdown changes every other packages money field value on the page?
I understand that by getting the element by ID is not efficient in the case here, yet getting by className does not work at all.
This HTML dropdown select box is repeated a few times on the page.
<!-- this is the dropdown -->
<select id="package-dropdown" class="selectpicker pkg-class">
<option value="">Select</option>
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
</option>
</select>
<!-- where the monetary value gets prefilled -->
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
// JS on change function
$(document).on('change','#package-dropdown', function(e) {
let package = document.getElementById("package-dropdown");
// This is where the price gets prefilled based off of the package selected
$(".display-package-amount").val(package.options[package.selectedIndex].getAttribute('data-value'));
});
Im struggling pretty bad on how to make these actually independent from each other to where each select box truly has nothing to do with the previous/next one. Any tips would be greatly appreciated!
You can't repeat ID in a page so use classes instead.
To get the associated input , traverse to a common parent with closest() then find() what you need within that parent
$(document).on('change', '.selectpicker', function() {
$(this).closest('.row').find('.display-package-amount').val(this.value)
})
.row {
padding: 1em;
border: 2px solid #ccc;
margin: 1em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
I am trying to build an app that let people choose a license and the price is different for different licenses. I want a real-time price update on the page of the product. Here is the reference that I took for the below code: https://stackoverflow.com/a/6740218
Code:
<script type="text/javaScript">
var price = {"3":"11","2":"500","1":"1000"};
$(function() {
$('select[name=dropdown_price_change]').change(function() {
document.getElementById('price_disp').innerHTML = price[$(this).val()];
});
// Trigger on dom ready
$('select[name=dropdown_price_change]').change();
});
</script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
Thanks in advance. ;)
innerHtml should be innerHTML and frankly, you should probably be using textContent instead of innerHTML in this case anyway since the values of the select don't contain any HTML.
Also, you shouldn't trigger the change function on document ready because the user will never get to see and use the dropdown list that way.
Lastly, add a "dummy" choice to the list as the default choice so that the user must change the value if they want to select "Personal License" from the list. Without this, the change event won't trigger because that was the default choice in the first place.
var price = {"3":"11","2":"500","1":"1000"};
$(function(){
$('select[name=dropdown_price_change]').change(function(){
document.getElementById('price_disp').textContent = price[$(this).val()];
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="">-- Select an Option --</option>
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
I am having an issue with cloning a div with a select2 drop down.
When the first one is shown on the initial page load, the select2 works fine. When I click the button to clone it, the next select2 doesn't. It's like it's disabled and doesn't work.
My code is as follows;
<div class="input-main white_bg cloneneedsanalysis">
<div class="action-input clone-needs-analysis">
<div class="action-input-white-shorter">
<div class="inner-sub-title-less-padding">
<p>Audience Analysis</p>
</div>
<div class="col-md-12">
<div class="form-group">
<select class="select2 select2-multiple need_analysis_selector" multiple="multiple" data-placeholder="Choose ..." name="needs_analysis[]">
<option value="">-- Choose Audience Categories --</option>
<option value="536"> Finance - - Cash collection</option>
<option value="537">IT - - Comms IT</option>
<option value="538">Strategy - - Strategy team 1</option>
</select>
</div>
</div>
</div>
<div class="action-input-plus-needs-analysis">
<a href="#" class="clone_needs_analysis_button">
<img src="http://www.test.com/assets/images/plus.jpg"></a>
</div>
<div class="action-input-remove-needs-analysis">
<a href="#" class="remove_needs_anaylsis_button">
<img src="http://www.test.com/assets/images/minus.jpg"></a>
</div>
</div>
</div>
$(document).on('click', '.clone_needs_analysis_button', function(e) {
e.preventDefault();
$(this).closest('.clone-needs-analysis').clone().insertAfter('.cloneneedsanalysis:last');
$(this).closest('.action-input-plus').hide();
$(this).closest('.action-input-remove').removeClass('hidden');
$('.select2').select2();
});
Use $(this).closest('.clone-needs-analysis').clone(true, true) instead of $(this).closest('.clone-needs-analysis').clone().
You need to specify the true, true parameters to tell JQuery to also clone the attached events.
Check the documentation here
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
I have a dropdown menu at the bottom of a form with 6 different options.
I need to display different content on a div below this menu depending on which option is selected.
No additional content should be visible until the user is to select one of the options and once the user select one of the options only content associated with that specific option should be visible.
I need to create this functionality using JavaScript but my knowledge of JavaScript is very limited and I don’t seem to find what I need online.
I believe what I need to do is create 6 different divs(one for each option) and toggle
a class that makes them visilble once its respective title is selected.
Here is the dropdown menu that I have:
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
Any help will be greatly appreciated.
I added the divs you mentioned and gave each an id which makes the Javascript a little easier.
Javascript
var ids=["student", "educator", "parent", "not-school", "publisher"];
var dropDown = document.getElementById("roleSel");
dropDown.onchange = function(){
for(var x = 0; x < ids.length; x++){
document.getElementById(ids[x]).style.display="none";
}
document.getElementById(this.value).style.display = "block";
}
HTML
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select id="roleSel" class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<div id="student" class="hidden">Student div</div>
<div id="educator" class="hidden">Educator div</div>
<div id="parent" class="hidden">Student div</div>
<div id="not-school" class="hidden">Not School div</div>
<div id="publisher" class="hidden">Student div</div>
Working Example http://jsfiddle.net/qbzmz/
use the onchange function like so
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" id="selctor" tabindex="50" name="role" onchange="selectChanged();">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<script>
function selectChanged(){
//get the value of selector and act upon it
//i would use jquery to do this stuff
}
</script>