I am currently working on a plugin for front-end user creation, but it is little more specific to the website I am working on.
Part of the form that I am using to collect the information, it asks if the currently logged in user wants to create an "Admin", "Manager" or "User":
<select class="form-control" name="userType" id="userSelection">
<option></option>
<option id="adminValue" value="adminSelect">Admin</option>
<option id="managerValue" value="managerSelect">Manager</option>
<option id="userValue" value="userSelect">User</option>
</select>
<div id="adminSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="adminType" class="form-control">
<option value="admin1">Admin1</option>
<option value="admin2">Admin2</option>
</select>
</div>
</div>
<div id="managerSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="managerDepartment" class="form-control">
<option value="manager1">Manager1</option>
<option value="manager2">Manager2</option>
</select>
</div>
</div>
<div id="userSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="userDepartment" class="form-control">
<option value="user1">User1</option>
<option value="user2">User2</option>
</select>
</div>
</div>
As for the js file:
(function( $ ) {
'use strict';
$('#userSelection').on('change',function(){
('.typeselection').hide();
('#' + this.val()).show();
});
})( jQuery );
After choosing from the first select options (name="userType"), one of the 3 following divs(id="adminSelect", id="managerSelect", id="userSelect") would appear and allow for more specific options for the current user.
What I have currently in my code is not working with the js (saw a couple of different posts on here and other sites regarding this) though, and I have checked to make sure the file is being loaded and it is as well.
I used Plugin Boilerplate Generator to start out the plugin as well and placed the js in the public/js/plugin-name.js file.
You gave the divs display: none;, which means it won't be displayed.
Instead of using ('#' + this.val()).show(); make a class called 'hidden' with the display: none; style. Give this class to the divs, and if one of the divs is clicked, use the following code:
$( "+"this.id ).removeClass( "hidden" );
This way you'll remove the display: none; property.
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>
When clicked, I want to go these links, but it doesn't work.
How can I make it work? Thanks.
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=3 } )">ID</option>
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=4 } )">ID2</option>
</select>
</div>
You can use this example. This is not MVC framework problem. Probably you used asp.net web form. This framework not working web form. You must use javascript methods. I create an example fastly for you with jQuery.
// find elements
var selectItem = $("#EType")
// handle select and go to link
selectItem.on('change', function(){
location.href = $(this).val();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#">Select and go</option>
<option value="https://omer.mollamehmetoglu.com">ID</option>
<option value="https://www.onedio.com">ID2</option>
<option value="https://www.stackoverflow.com">ID3</option>
</select>
</div>
I have a Request with the Chosen Javascript plugin : https://harvesthq.github.io/chosen/
Is there a way to enable a default option value when you're looking for another one?
Let me explain, I have a selector in HTML where I have a lot of different options and the last one is "Other", when it's selectionned, I want to show an input text to let the user add a new choice if he wants.
So I would like to let appear everytime the "Other" option when an user is looking for an ((un)existing) option, but with this plugin I didn't fhind the way to make it.
Let me give you an exemple :
$(".chosen-select").chosen({width: "220px"});
$(".chosen-select").chosen().change(function(){
if($(this).val() == ''){
$('div#newcolor').removeClass('hide');
} else {
$('div#newcolor').addClass('hide');
}
});
.hide{
display:none;
}
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select class="chosen-select" name="test">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
<option value="">Ohter</option>
</select>
<div id="newcolor" class="hide">
<label>You can add a new color : </label>
<input value="" placeholde="Try with Pink">
</div>
<hr>
<button>Submit</button>
So if you try to look for Pink, you could not select "Other" option and so you can't add one new...
Thanks
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 trying to add two select2 multi-value select boxes to my Rails app.
The top form works fine, but the bottom one does not work.
I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?
Index.html
# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Popular">
<option value="Alt">Rock</option>
<option value="Ind">Indie</option>
<option value="Ind">Alternative</option>
<option value="Ind">Acoustic</option>
</optgroup>
</select>
</div>
# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Local">
<option value="PDX">Greater Portland</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
application.js
$("#e9").select2();
You can not have two elements with the same id. Use classes instead.
Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.
then do $('.my-select').select2();
For each select2 in the same page you must define unique id for tag "data-select2-id".
data-select2-id="Project"
and
data-select2-id="WBSDate"
As #Ramy Mention. I hope its works fine for everyone.
If It won't work then try this.
In select box you can't use same id for an example:
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
If you have same id the search box won't work.
Just try to different Id Name like below.
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select1">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
I faced this kind of problem. That's why i shared here my opinion.
Thanks hope someone will get help from this.
Ok, so it was something fundamental!
The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...
I wish SO allowed you to delete answers.
Using identical data-select2-id property solve the problem.
MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.
#Html.ListBoxFor(x => x.WIds, WList, new { #class = "form-control opWflWafers", #multiple = "multiple", data_select2_id=identicalname })
<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
$('#parentesco*').select2({
placeholder: 'Seleccionar paciente',
ajax: {
url: 'ajax_paciente.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>