I have a select2 element and an input element as follows...
Label: <input class="default-ele" type="text"/>
<select class="some-select">
<option>-- None --</option>
</select>
and some JS/JQuery as follows...
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('change', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});
That all works except that if you enter a value into the input then click the select with the cursor still in the input, the value is not there until you move focus away from the select and back to it. Is there a timeout or some other way to get the value to display when immediately clicking on the select after the input changes?
TIA
I would suggest to use keypress event to trigger 'select' refresh functionality.
Something like below.
This should update trigger callback on input as soon as you lift key.
$(document).ready(function() {
$(`.${type}-default`).select2({
theme: 'bootstrap'
});
$(document).on('keyup', '.default-ele', function() {
var newVal = $(this).val();
var selAdd = new Option(newVal, newVal);
$('.some-select').append(selAdd).trigger('change');
});
});
Related
I have multiple input fields which can be manipulated by keypresses or a jquery keypad plugin.
At this point the only issue left is to keep the input field on focus when switched from one to another. I know the root cause of this issue is
$(".keypad-close").click();
which is simulating the keypress of the keypad's close (enter) button. this click action is setting focus to the button instead of the new input field:
Javascript:
$( document ).ready(function() {
var keypadTarget = null;
$('#inlineKeypad').hide();
function setKeypads(){
$('.inlineTarget').focus(function(){
$('#inlineKeypad').show();
if (keypadTarget != this.id) {
$(".keypad-close").click();
keypadTarget = this.id;
}
$('#inlineKeypad').keypad('option', {target: $('#'+keypadTarget)});
});
}
The function setKeypads() is initiated from within another function on page load.
HTML:
<input step="0.01" value="0.00" id="price-5" class="inlineTarget">
<input type="text" value="0" id="quantity-5" class="inlineTarget">
Can anyone of you point me in the right direction on how to achieve this?
$('.inlineTarget').on('blur', function() {
var value = $(this).val();
$.ajax({
url: '',
data: {
value: value
},
....
});
});
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
I need to display the value of the selected item as alert when the user clicks on the #btnValue button.
jQuery(function() {
var catg_str = "";
$('#btnValue').click(function() {
alert(catg_str);
}
$( "#catg_list" ).change(function () {
$("#catg_list option:selected").each(function() {
catg_str += $( this ).text();
});
});
});
I need to display the value inside catg_str as alert when user clicks the #btnValue button. The code above works but the value displays as "undefined". Please help
Just alert the .val() of the select element -- it will be the value attribute of the selected option:
alert($("catg_list").val());
I want to respond to the user selecting an item in a select element. Yet this jQuery:
$('#platypusDropDown').select(function () {
alert('You selected something');
});
...does nothing. It shows no alert, although jsFiddle sees it as valid jQuery.
The Click event works, but it's too fast - it fires on clicking the select element, prior to making a selection.
Of course, I really want to do something like:
$('#platypusDropDown').select(function () {
var selection = $('platypusDropDown').val;
$.getJSON('platypus.json', selection, data() {
// . . .
});
});
The HTML:
<select id="platypusDropDown">
<option value="duckbill">duckbill</option>
<option value="duckbillPlatypus">duckbillPlatypus</option>
<option value="Platypus">Platypus</option>
<option value="Platypi">Platypi</option>
</select>
You need to use change event
$('#platypusDropDown').change(function () {
var selection = this.value; //grab the value selected
$.getJSON('platypus.json', selection, data() {
. . .
});
});
Fiddle
Plus $('platypusDropDown').val here val should be val() and you dont need to create a jquery object again over the element, this inside the handler represents DOM element (select on which the event is bound to) and you can directly access the value with this.value or $(this).val()
I know that there is the change event handling in jQuery associated with an input of type select. But I want to know if the user has selected another value in the select element ! So I don't want to run code when the user select a new element in the select but I want to know if the user has selected a different value !
In fact there are two select elements in my form and I want to launch an ajax only when the two select elements has been changed. So how to know that the two elements has been changed ?
You can specifically listen for a change event on your chosen element by setting up a binding in your Javascript file.
That only solves half your problem though. You want to know when a different element has been selected.
You could do this by creating a tracking variable that updates every time the event is fired.
To start with, give your tracking variable a value that'll never appear in the dropdown.
// Hugely contrived! Don't ship to production!
var trackSelect = "I am extremely unlikely to be present";
Then, you'll need to set up a function to handle the change event.
Something as simple as:-
var checkChange = function() {
// If current value different from last tracked value
if ( trackSelect != $('#yourDD').val() )
{
// Do work associated with an actual change!
}
// Record current value in tracking variable
trackSelect = $('#yourDD').val();
}
Finally, you'll need to wire the event up in document.ready.
$(document).ready(function () {
$('#yourDD').bind('change', function (e) { checkChange() });
});
First of all you may use select event handler (to set values for some flags). This is how it works:
$('#select').change(function () {
alert($(this).val());
});
Demo: http://jsfiddle.net/dXmsD/
Or you may store the original value somewhere and then check it:
$(document).ready(function () {
var val = $('#select').val();
...
// in some event handler
if ($('#select').val() != val) ...
...
});
First you need to store previous value of the selected option, then you should check if new selected value is different than stored value.
Check out the sample!
$(document).ready(function() {
var lastValue, selectedValue;
$('#select').change(function() {
selectedValue = $(this).find(':selected').val();
if(selectedValue == lastValue) {
alert('the value is the same');
}
else {
alert('the value has changed');
lastValue = selectedValue;
}
});
});
You can save the value on page load in some hidden field.
like
$(document).ready(function(){
$('hiddenFieldId').val($('selectBoxId').val());
then on change you can grab the value of select:
});
$('selectBoxId').change(function(){
var valChng = $(this).val();
// now match the value with hidden field
if(valChng == $('hiddenFieldId').val()){
}
});
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
http://docs.jquery.com/Events/change