jQuery blur() appears on focus - javascript

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);
});

Related

How can I add to the end of the string that already exists in input field?

Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}
val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});
First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.
append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/

Drupal gets into loop when calling input text change event

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);
});
});

Captcha Alert diplaying even I fill the captcha text

I am validating the captcha with a hidden textbox, but the alert is displaying even when I fill the captcha. But on second time click it works fine as required. Might be some javascript code issue. Please see the JS code.
$(document).ready(function () {
$('#' + '<%=btnSend.ClientID %>').on('click', function (e) {
var captcha = $("input[name$=CaptchaControl1]").val();
$('#' + '<%=txtCaptcha.ClientID %>').val(captcha);
})
});
You should listen for the input field onKeyUp or onChange event to copy the value of the text box into the hidden field.
It seems like this:
$(document).ready(function () {
var cc1 = $("#CaptchaControl1");
cc1.keyup(function () {
$("#txtTotalAmt").val(cc1.val());
});
});

button onclick does not fire when its position is changed

I have a textbox where onchange event adds some element at runtime. Due to this the submit button's position is changed. If user enters something in the textbox and clicks on the button the onclick event does not fire. I suspect its because at the same time the position of the button changes and browser thinks the click happened on page and not on the button.
Is there a way I can handle this situation? I can not move the button above the element which is added at runtime.
I have created a sample jsfiddle: http://jsfiddle.net/WV3Q8/3/
HTML:
<p>Enter something</p>
<input type="text" id="input" onchange="onChange()">
<div id="log"></div>
<button value="Go" style="display:block" type="button" onclick="submit();" id="btn-submit">Submit</button>
JavaScript:
function onChange(){
var value = $('#input').val();
$('#log').append('<p>New value: ' + value + '</p>');
}
function submit(){
alert('value submitted');
}
Edit 1
Test Case (Question is about 2nd test case) Its happening in all browsers (Chrome, IE 10 etc):
Enter something in the textbox and hit tab, p element is added and button's position is moved. Now click on submit button. An alert is shown.
Enter something in the textbox and click on the submit button. p element is added but the alert is not shown.
Edit 2:
I can not use other key events like keyup, keydown or keypress because of obvious reasons (they fire on every keypress).
setimeout too is out of question since there are some radio buttons which are generated at runtime on the onchange event of textbox. Its no wise to click on submit button without showing these radio buttons to user.
For your edit #2 you have to delay the append with setTimeout() method like this:
setTimeout(function(){
$('#log').append('<p>New value: ' + randomVal + '</p>');
},100);
Fiddle
Working Fiddle
A way out is to use onkeypress
<input type="text" id="input" onkeypress="onChange();">
UPDATE
If it is possible for you to use mousedown event, it work's good.
Updated Fiddle
You are missing a return true statement in onChange()
Here is the code on jsfiddle
function onChange(){
var randomVal = Math.floor((Math.random()*100)+1);
$('#log').append('<p>New value: ' + randomVal + '</p>');
return true;
}
function submit(){
alert('value submitted');
}
EDIT: Alternative solution might be calling onChange() inside submit().
I would use setTimeout with keyup event:
var time;
function onChange() {
clearTimeout(time);
time = setTimeout(function() {
var value = $('#input').val();
$('#log').append('<p>New value: ' + value + '</p>');
}, 200);
}
It will append text once user finishes typing.
Demo: http://jsfiddle.net/WV3Q8/8/
This is not good solution but you can trigger the submit function for your case like this:
function onChange(){
var value = $('#input').val();
$('#log').append('<p>New value: ' + value + '</p>');
submit();
}
function submit(){
alert('value submitted');
}
demo

one.('click') reset after click

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();
});

Categories