with similar question. :)
<input type="text" name="npcolor" id="npcolor" size="9" maxlength="9" value="<?=$userinfo->npcolor?>" onchange="change_npcolor()" readonly />
<input type="text" ID="np_sample" size="2" value="" readonly style="background-color:<?=$userinfo->npcolor?>" />
<input type="button" onclick="pickerPopup202('npcolor','np_sample');" value="Change" />
function pickerPopup202 is changing npcolor, but when npcolor is changed it don't call change_npcolor(). When I put extra button that call change_npcolor it works. I tried also:
document.getElementById("npcolor").onchange='change_npcolor()';
without success.
P.S. JS that changes npcolor (pickerPopup202) isnt mine, and ALL code is at one line, so i cant really mod it.
When you change the value dynamically, the onchange event doen't fire. You need to call the change_npcolor() method yourself. You could also call document.getElementById("npcolor").onchange(). (This is less efficient, but more flexible when the event handler may change eventually.)
You cannot change the event listener by just adding a string with javascript code to the onchange property. You can do it like this, however:
document.getElementById("npcolor").onchange = function(){
change_npcolor();
}
document.getElementById("npcolor").onchange='change_npcolor()';
here you have change_color() as a string but this is not correct syntax.
Instead of that you can use
document.getElementById("npcolor").onchange=change_ncolor;
Because the change_ncolor works as an object.
Related
Hi I am creating jquery plugin. I stuck on when i focus on input box then it triggered twice.
$(document).ready(function(){
$('#searchText').typefast();
$('#searchText1').typefast();
})
$.fn.typefast=function(){
$('input').focus(function(){
console.log($(this).attr('id'));
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
`
It's running twice because you are explicitly calling typefast() twice in your document.ready function. Even though your selectors were both missing the # in them, typefast() still gets called on the empty jQuery wrappers. And, since typefast() doesn't actually do anything with the contents of the wrapped set it gets called on, it goes ahead and processes on all input elements. So, the end result is that all input elements get typefast registered into their focus event twice.
If (and this is a big if) you were going to use a plug-in for this, you should just call it once because the plug-in finds all input elements and sets their event handler. Also, plug-ins have a certain pattern that is recommended to be followed to ensure that the $ will, in fact, point to the jQuery object and to ensure that method chaining will work. That would look like this:
$(function(){
// You would want this to be a jQuery utility method (not a wrapped set method)
// so you would set it up directly on jQuery, not jQuery.fn. This way, you can
// just call it whenever you want without a wrapped set.
$.typefast();
});
// By wrapping the plugin in an Immediately Invoked Function Expression
// that passes itself the jQuery object, we guarantee the $ will work
(function($){
$.typefast = function(){
$('input').focus(function(){
console.log($(this).attr('id'));
});
}
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
But, there is no need for a jQuery plug-in here. This is not what plug-ins are for and you are not even writing it according to best practices. This is not the way to set up event handlers. All you need to do is set up an event handler for the focus event of the textboxes:
// Just passing a function directly to the jQuery object is the same
// thing as explicitly setting a callback for document.ready
$(function(){
// This is the function that will be called when any input gets the focus
function typeFast(){
console.log($(this).attr('id'));
}
// Set all input elements to call typeFast when they receive the focus
$('input').on("focus", typeFast);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">
So i have 2 on blur events that check for different things, but the browser only recognizes the first one and disregard the second, how can i fix that?
<input type="text" name="first" onblur="validator()"; onblur="alpha(this)"; />
Thats what i have tried so far. I have also tried without the semicolons but no luck.
You can use like this,
onblur="validator(); alpha(this);"
It is very simple. Just like this.
<input type="text" name="first" onblur="validator() ; alpha(this)"; />
I am trying to move text between text boxes, but failed.
what is wrong with this approach.
<html>
<script>
function fill(){
document.getElementById("text2").value = document.test.text1.value
}
</script>
<form name="test" id="test">
<input type="text" name="text1" id="text1"/>
<input type="text" name="text2" id="text2" value=""/>
<button name="b" onclick="fill()">move</button>
</form>
</html>
One reason is the button is submitting the form. That needs to be suppressed. Also, avoid inline (aka DOM zero) event declarations and bind the event more formally:
function fill(evt){
document.getElementById("text2").value = document.test.text1.value;
evt.preventDefault();
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#test button').addEventListener('click', fill, false);
}, false);
I'm using a few modern methods there, so you might need to tweak it if you need to support older IEs, but you get the idea.
Note also that, if the fill function is used only for this button and not elsewhere, instead of defining it with a name and referencing it as I do here, you could reference it as an anonymous function directly in the event binding. Look up "anonymous functions" for more on that.
I am building a mobile site for a Motorola / IE 6 device.
For some reason that I can not come up with, jQuery's .select() function is working, but directly calling it in javascript is not.
<input type="text" id="lid" value="" class="as_done">
The jQuery way that works is this:
$('#lid').select();
The way that isn't working is this:
document.getElementById('lid').select();
This has me all sorts of confused. Any ideas as to why this is?
EDIT: I am not trying to do anything in jQuery. I am just trying to select the text inside the input box. I shouldn't need jQuery to do this, but the standard way is not working. http://www.w3schools.com/jsref/met_text_select.asp
Interesting change made it work for me. Perhaps this is a bug in windows mobile IE 6?
Consider the following html:
<input type="hidden" id="lid_as" name="lid" value="1">
<input type="text" id="lid" value="" class="as_done">
Calling alert("document.getElementById('lid').name"); resulted in the message lid. This makes me think that it is grabbing the first input box whose ID is actually lid_as.
When I moved the lid_as input below the lid box, the select function works properly.
So this HTML made it work:
<input type="text" id="lid" value="" class="as_done">
<input type="hidden" id="lid_as" name="lid" value="1">
Again, this question is in relation to WINDOWS MOBILE IE 6.
$() function returns a jquery object whereas document.getElementById returns a simple DOM object.
maybe it happens due to the fact you did not call .focus() in advance
document.getElementById('lid').focus();
document.getElementById('lid').select();
this is wrapped in jQuerys .select()
I have this piece of code:
<input type="text" name="desc" id="desc" onchange="OnDescChange();" />
but it does not act as i want. It runs the function when i leave the box, i would like to do it everytime the content of that inputfield changes, how do i do that?
(im trying to make a suggestionbox to the users input).
Ive also tried jquerys .change but it gives med the same result.
Try onKeyUp or onKeyPress.
Try to use the onkeypress event:
<input type="text" name="desc" id="desc" onkeypress="OnDescChange();" />
I would recomment using the onkeyup event handler
<input type="text" name="desc" id="desc" onkeyup="OnDescChange();" />
onkeydown or onkeypress could be used too, but the only problem to be aware of with that is that these event fires before the text in the input field has been updated.
You can use 'onKeyUp' or 'onKeyDown' events instead of 'onchange'
If you are using jquery you can use something like the following
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
Hope this helps.