I need some help.
I have this code in my jsp for capture event onchange with Jquery.
jQ("#idExp").change(function() {
onchangeExp();
});
function onchangeExp(){
alert("onchangeExp");
if(jQ("#idExp").val()!="-1"){
recuperarDatosAF();
}else{
jQ("#comboAF").attr('disabled',true);
jQ("#comboAF").val("-1");
}
}
I fill the combo whith this:
jQ("#idExp").html("");
jQ("#idExp").append("<option value='-1'>"+""+"</option>");
jQ.each(expedientes, function(i,value){
jQ("#idExp").append("<option value='"+i+"'>"+value.codExpediente+" </option>");
});
Values of i is [0,1,2..]
The problem is that when I select the blank option from the combo with the value '-1', do not launch the onchange function runs, but instead when I select any other option from the combo, onchange function running.
You can not put negative values of combo options?
Thanks for the help.
The default value for your select box is the value of your first option so the value of the select box does not change and the change event is not triggered.
try to add a real integer as value like this
jQ(function() {
var j = jQ('#idExp');
j.append(jQ('<option/>').attr('value', -1));
j.change(function() {
if(j.val() == -1) {
jQ("#comboAF")
.attr('disabled',true)
.val("-1");
}
else {
recuperarDatosAF();
}
}).trigger('change');
});
You can trigger change event when appending your option:
jQ("#idExp").append("<option value='-1'>"+""+"</option>").change();
Related
I'm having some problems with what should be a simple jQuery show/hide based on a select's value. The select is hidden by default based on other selects, which might be why it's not working?
Unfortunately I can't change the source code in any manner, I can only add a function like this.
$(document).ready(function() {
$('#question-select-1271443').change(function() {
var selection = $(this).val();
if (selection == 'CIIC') {
$('#question-select-1082380').show();
} else {
$('#question-select-1082380').hide();
}
});
});
function val() extract the value of the attribute value of the option selected. Maybe you are trying to extract the content of the option. Example:
<select id="sas">
<option value="hi">Hello</option>
</select>
$("#sas").change(function(){
$(this).val(); // This return hi
$("option:selected", this).text() // This return Hello
});
I'm working with Drupal 7, the problem is that I have an input type text for the quantity of the products with 2 arrows in span by default (widget quantity for the add cart button).
When using the js_injector module for getting the 'change()' event of the input, something weird happens and a loop started changing the value of the input for more or less depending of the clicked arrow.
jQuery(function($) {
$(document).ready(function(){
$('#edit-quantity').bind('change keydown keyup click input submit mouseenter', function (e) {alert('Type: ' + e.type); });
});
});
->This works correctly but doesn't get the arrow-span clicked options:
$('#edit-quantity').bind('keydown keyup click input submit mouseenter',...
->These options create a loop:
$('#edit-quantity').bind('change ...',
OR
$('#edit-quantity').change(function (e) {alert('Type: ' + e.type); });
My point is , Why this .change() event creates such a loop? or better how can I stop it to use the event?
Thank you,
You can use "input" instead of change
$('#textbox').on('input', function() {
// do your stuff
});
Better not to use change on text field. Change is more preferred for radio button, select field, check-box etc...
Hope it helps someone, at the end I just did search for all the possibilities of change. Not only in the input also at the 'buttons' represented with span. I did some little trick and ended up like this:
jQuery(function($) {
function value()
{
if($(this).index()!=0) //Just execute once
{
var price=parseFloat(document.getElementsByClassName('field-item')[0].innerHTML.replace(' €','')).toFixed(2);
var quantity = parseFloat($("#edit-quantity").val());
price *= quantity;
var glbvar = price.toFixed(2).replace('.',',')+' €';
//Set Price
document.getElementsByClassName('field-name-commerce-price')[0].getElementsByClassName('field-item')[0].innerHTML = glbvar ;
}
}
$(document).ready(function(){
//When refreshing the value get lost:
if( parseFloat($("#edit-quantity").val()) != 1) value();
/*For input*/ $("#edit-quantity").bind("propertychange keyup paste input",value);
/*For span*/ $('span').bind('click',value);
});
});
I would like to detect the event where an option is de-selected from a select element. So for instance, if my HTML is:
<select id="select_box">
<option value="1">Hot</option>
<option value="2">Cold</option>
<option value="3">Just Right</option>
</select>
And the second option is selected (value="2"), and then the user de-selects it by clicking on another option (such as value="3") or clicking the same option again, how do I detect that event using jQuery? My goal is to fire off a function when it happens.
I tried the following:
$("#select_box option:selected").change(function() {
console.log($(this).val());
});
But it didn't work.
The change event should go on the select element itself:
$("#select_box").change(function() {
console.log($(this).val());
});
This event fires when the value of the select is changed and will match the behaviour you require.
I want the value of the option that was de-selected.
In that case you would need to store the previous value when it's selected, something like this:
$("#select_box").change(function() {
var $select = $(this),
currentValue = $select.val(),
oldValue = $select.data('previous-value');
// do stuff...
$select.data('previous-value', currentValue);
});
Well, this is how I would handle this with with a change Event listener.
$("#select_box").on('change', function(e){
var $t = $(this), data = $t.data('last') || {optText:'none', val:'none'};
$t.next().text('last was ['+data.optText+'] and its value is "'+data.val+'"').end()
.data('last', {optText:$t.children('[value="'+$t.val()+'"]').text(), val:$t.val()});
});
Fiddle HERE
I would enable the element when the option is selected using the one() event binding method
change event will fired only when value is changed which is required by you
$("#select_box").change(function() {
console.log(this.value);
});
You can do it manually some thing like below code i given,
var xSelectedOption = 0;
$("#select_box").change(function() {
if(xSelectedOption != $(this).val())
{
xSelectedOption = $(this).val();
console.log("Option was changed!");
}
});
I have the below script:
$("#product1").autocomplete({
source: "get_sku_family",
messages: {
noResults: '',
results: function () {}
},
select: function (event, ui) {
var selectedObj = ui.item;
$.post('get_as_09',
{
data: selectedObj.value
},
function (result) {
if (result[0] > 0) {
$('#h09_1').attr('checked', 'checked');
} else {
$('#h09_1').removeAttr('checked');
}
}
});
}
});
This has an autocomplete field that when text is entered provides options from a database. this works. then on clicking an option from the autocomplete, it queries the database with a function(get_as_09) and checks the checkbox based on the result.
Again this works 100%.
What I do want to change though, is that when I enter a new value on the autocomplete, it must clear the checkboxes before applying the new database lookup logic to check the boxes.
I just don't know where to add the $('#h09_1').removeAttr('checked');
Thanks and Regards...
any help appreciated
UPDATE Ripu
if(data:selectedObj.value.length ==0 ){$('#h09_1').removeAttr('checked');};
$.post('get_as_09', {data:selectedObj.value},function(result) {
if(result[0] > 0) {
$('#h09_1').attr('checked','checked');
} else {
$('#h09_1').removeAttr('checked');
}
});
before this line
$.post('get_as_09', {data:selectedObj.value},function(result) {
check if the value of data:selectedObj.value is empty. If it is empty, then you don't need to make a post request, just simply uncheck the checkbox
try to make it on texbox on change event means when you enter the new value in auto complete make it there to clear any thing you want check
Why dont you clear your checkboxes on focus of the auto-complete field.
Here is the documentation about this event http://api.jqueryui.com/autocomplete/#event-focus
as you said just a $('#h09_1').removeAttr('checked'); should suffice.
focus: function( event, ui ) {
$('#h09_1').removeAttr('checked');
}
what if you put before
$.post('get_as_09', {data:selectedObj.value},function(result) {
so everytime before you put smth inside your $('#h09_1') you clean it?
What if you attach an event listener on the element based on the keypress event? Something like this:
$(selectedObj).one('keypress', function (e) {
var checkbox = $('#h09_1');
if (selectObj.val().length > 0) {
checkbox.attr('checked', false);
}
});
This way you know somebody is typing in the field before you clear it. You could bind the event listener after each database lookup. Just an idea.
I would like a span to update when a value is entered into a text field using jquery.
My form field has a text box with the name "userinput" and i have a span with the id "inputval".
Any help would be greatly appreciated.
UPDATE:
although you marked this as the correct answer, note that you should use the keyup event rather than the change event or the keydown
$(document).ready(function() {
$('input[name=userinput]').keyup(function() {
$('#inputval').text($(this).val());
});
});
Try the following, you have to call again keyup() to trigger for the last char:
$(".editable_input").keyup(function() {
var value = $(this).val();
var test = $(this).parent().find(".editable_label");
test.text(value);
}).keyup();
Try this. Be sure that you understand what is going on here.
// when the DOM is loaded:
$(document).ready(function() {
// find the input element with name == 'userinput'
// register an 'keydown' event handler
$("input[name='userinput']").keydown(function() {
// find the element with id == 'inputval'
// fill it with text that matches the input elements value
$('#inputval').text(this.value);
}
}
$(function() {
$("input[name=userinput]").keydown(
function() {
$('#inputval').text(this.value);
}
)
})