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);
});
});
Related
I want to validate each input of a form on blur() so if user leaves the input box.
$("form#relative_form :input").blur(function() {
var input = $(this).attr('id');
alert("Validate: " + input);
});
It works fine but when i'm in the first input field and hit TAB to get to the next input field,
my script straight validate the second input.
But I want only to validate if i leave the inputs.
JSFiddle
The alert is causing the object to lose focus triggering the blur. Use Console.log() to test instead:
$("form#relative_form :input").blur(function() {
var input = $(this).attr('id'); // This is the jquery object of the input, do what you will
console.log("Validate: " + input);
});
Your code seems to be working fine!!!
But Instead of the alert you must need to use console.log().If you are
using alert then it will continuous call blur function because you are
trying to close the alert box and at that time it will call blur
event.So it's something like circular function.
Instead of:
$("form#relative_form :input").blur(function() {
var input = $(this).attr('id');
alert("Validate: " + input);
});
It should be:
$("form#relative_form :input").blur(function() {
var input = $(this).attr('id');
console.log("Validate: " + input);
});
I have this jQuery code. I make first lines here as comment, because they are not important in my question, just for structure. I have click event, after click on td I have input field with text in it. I set focus at end of text. But when I have made click, I want to remove focus , so that I can click in middle position of name, and cursor will be there. It works when it is one.('click'), but i need to do it multiple times, so one click works just for one time.
$('td').on('click', function() {
//val = $(this).text();
//console.log(val);
//rowid = $(this).parents('tr').attr('id');
//realclass = $(this).attr('class');
//$("tr").filter("#" + rowid).find("td").filter("." + realclass).find("span").hide(); //hide td->span field..
//$("tr").filter("#" + rowid).find("td").filter("." + realclass).find("input").show();//..and show input field
//get focus on end of input val
SearchInput = $("tr").filter("#" + rowid).find("td").filter("." + realclass).find("input");
strLength = SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
The problem is that clicking on the input itself also triggers the click event on the encompassing <td> element (due to event propagation or "bubbling"), which you don't want to happen. To prevent that you want to call the event.stopPropagation() function when handling click events on the input:
$('td input').on('click', function(e) {
e.stopPropagation();
});
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();
I have this function:
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function (e) {
e.stopPropagation();
showUser(value, '2', this.id)
$(this).css({
"-webkit-border-radius": value
});
});
});
It reads the value of a textbox,
input type="text" id="border-radius" value="20px"
...and does a few things with it that are not relevant to my problem.
The textbox has the id="border-radius", and when it is clicked (and has a value) the function executes, as shown: $("#border-radius").click(function(){ ...do some stuff...
Basically, I want to be able to type a value into the textbox, and then click an object (submit button or div, preferably a div) and have it execute the function after: $("#border-radius").click(function(){ ...do some stuff... Instead of having to click the textbox itself
What can I add/change to enable this?
I think you need to identify the event target.
that you can do it by
event target property
example
$(document).ready(function() {
$("#border-radius").click(function(event) {
alert(event.target.id);
//match target id and than proceed futher
});
});
Put the click handler on #my-button or whatever your button is.
$("#my-button").click(function(){
var value = ... /* your original code */
});
It will still work because you are getting the value like $("#border-radius").attr("value"); and not $(this).attr("value");. So you all you need to change is which element you attach the click function to.
Alternatively, if you want to keep both handlers, you can just use it for both elements like this:
var commonHandler = function(){
var value = ... /* your original code */
};
$("#border-radius").click(commonHandler);
$("#my-button").click(commonHandler);
You can also trigger the click event of #border-radius, but this will execute all the event handlers attached on it:
$("#my-button").click(function () {
$("#border-radius").click();
// or $("#border-radius").trigger('click');
});
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);
}
)
})