|
JavaScript - Problem With Applying Onkeyup On Input
Hi, i try to do that every char that i type in a input-type there will be a alert,
but it doesnt do that, when the page loads it pop ups one time an alert and it doesnt pop up more alerts when i type something in the input-type Sorry for the bad english here is my code Code: <script type="text/javascript">
function init()
{
document.Form1.phone.onkeyup= alert('a');
}
window.onload=init;
</script>
Similar TutorialsHello everyone... I've got a question about an onKeyUp event. I'm using a text box that HAS to be a negative number therefore it has to have a - sign in front of the number. Can someone point me in the right direction as to how to write a function to do this? Thanks so much...
Now, i am adding a onKeyUp function to change the radio if the value of another field is larger than 1. But this code isn't working... Any thoughts? Code: function getUses() {
var listcost = document.getElementsByName('form[listcost]');
var uses = document.getElementById('Uses');
if (uses == 1) {
listcost[0].checked = true;
}
else {
listcost[1].checked = true;
}
}
Hi, I have the following code. This code is working fine in FF but not in IE. Can any one let me know how i can resolve this. function handlerFunc (elem, elem1) //elem1 is id of input tag { elem.onKeyUp = keyupHandler (elem1); //throwing error in IE. If i remove argument it is working fine, but i want to make it work with arguments. } function keyUpHandler (elem1) { alert (elem1.form.name); } what is the best way to count the seconds between each onkeyup to "autosave" without sending an ajax command after each key? id like my script to update after 2 seconds of no typing.... (yes, jquery is in use on the page) Code: function microtime (get_as_float) {
var now = new Date().getTime() / 1000;
var s = parseInt(now, 10);
return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var lastKeyUp=0;
function saveChange(id,field,value){
thismicrotime=microtime(true);
if(lastKeyUp == 0 || (thismicrotime-lastKeyUp) >= 2000000){
$.get("saveChange.php",
{ 'field': field, 'value': value, 'id': id },
function(data){
lastKeyUp=thismicrotime;
},
'xml'
);
}
}
Code: <input type="text" name="field1" onkeyup="saveChange('2','field1',this.value);" />
i'd use onchange or onblur but that requires you to unfocus the field before it saves... Hey, I have a calculation system that uses ajax with php and xml and executes with onkeyup. The only problem with this is the result can be returned before the user finishes entering the entire number. My question is how can I give a delay prior to running the rest of the js. I know how to use setTimeout() but will it get reset out every time the function is called or for example if they enter 5 characters in the form, will the script be called 5 times with a second delay from each or will it only be called once? Is there a performance degradation involved? Hope that made sense. Thanks! I have client side scripting for a text box value which truncates value if user enters more than 255 characters. For this i use both onchange and onkeyUp events. I added Server side validation too(more cautious) to restrict user from continuing the page if he enters more than 255 chars. We are using this product from 7 yeras and yesterday one of the customer said that(he has a screenshot too) he saw the server side error message. this explains that my client side javascript methods doesnot fire. he is using IE browser. Any idea why this could happen?
Hi, I currently have some buttons representing letters and a textbox. When a button is clicked, its value is copied into the text box. I have an onkeyup event which means that every time a button is clicked, a function is called which searches some arrays using the current text box value. However, the problem I am currently having is that the onkeyup event which calls the function works if I type the value in using my computer keyboard, but not when using the buttons (even though the buttons enter values into the textbox). Does anyone have any suggestions on how I can make it so that when I press a button, the onkeyup event triggers and the function is called? Thanks. Hi, I'm a little rusty on my javascript. I'm trying to use onKeyUp and onBlur to validate html table field text entry. I'm using Firefox in Windows XP, and Javascript is turned on. Mind taking a look to see why it's not working? Thanks! -Jason Code: <html>
<head>
<title>javascript onKeyUp problem example</title>
<script type="text/javascript"><!--
//Validates full zip code when zip code field is left. If invalid, should pop an alert message.
function onBlur_Zip() {
var zipCodePattern = /^\d{5}$|^\d{5}-\d{4}$/;
if (zipCodePattern.test(document.getElementByID("zip").value) == -1) {
alert("Please enter a valid zip code.");
}
return false;
}
//Validates partial zip code. If invalid, should make table row background color yellow.
function onKeyPress_Zip() {
var zipCodePattern = /^\d{0,5}$|^\d{5}-\d{0,4}$/;
var val = document.getElementByID("zip").value;
alert(val);
if (zipCodePattern.test(document.getElementByID("zip").value) == -1) {
alert("onkeypress zip false");
document.getElementByID("zipRow").style.backgroundColor="yellow";
}
else {
alert("onkeypress zip true");
document.getElementByID("zipRow").style.backgroundColor="white";
}
return false;
}
// -->
</script>
</head>
<body>
<form><table border=1 cellpadding=5>
<tr id="zipRow">
<td>Test field:</td>
<td><input id="zip" type="text" name="zip" onKeyUp="javascript:onKeyPress_Zip()" onBlur="javascript:onBlur_Zip()" /></td>
</tr></table></form>
</body>
</html>
I have a function that checks to see the number entered in a textfield and then, if greater than 1, will change a radio button from Single to Multiple and visa versa. The function is called from the textfield with an onkeyup="function()". The problem I am having is that it works in IE just fine, but in Firefox it doesn't seem to be doing anything. I'm not getting any errors and can't seem to see what is the problem. Google doesn't seem to be any help... Anyone have any ideas? Thanks! Just like the title says. What would make a block of code that runs an "onkeydown" work perfectly fine, but when changed to "onkeyup" it fails. I could post code, but I dont even think it would matter? onkeypress also fails.
<script type="text/javascript"> function sum1() { noofrow = document.getElementById("NoOfRow").value-0; for (i=1;i<=3;i++) { var DAY1=parseFloat(document.getElementById('"day"+i').value,2); var day2=parseFloat(document.getElementById("day"+i).value,2); var day3=parseFloat(document.getElementById("day"+i).value,2); var tot=DAY1+day2+day3; document.getElementById("day"+i).value=tot; } } </script> <?php mysql_connect("localhost", "Admin", "aaaaaa") or die(mysql_error()); mysql_select_db("sb") or die(mysql_error()); $sqlstr = "SELECT * FROM WWW "; $row=mysql_query($sqlstr); //echo $record; //$row = mysql_fetch_array( $record ); ?> <body> <table width="834" border="1"> <tr> <td width="115">Order name</td> <td width="80">qty</td> <td width="144">Day1</td> <td width="144">Day2</td> <td width="144">Day3</td> <td width="145">TOT</td> </tr> <?php $count=0; while($record = mysql_fetch_array( $row )) { $count++; ?> <tr> <td> <?php print $record['Ordername']; ?></td> <td> <?php print $record['QTY']; ?></td> <td><form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="day1qty<?php echo $count ?>" value="" /> </label> </form> </td> <td> <label> <input type="text" name="day1qty<?php echo $count ?>" /> </label> </td> <td> <label> <input type="text" name="day2qty<?php echo $count ?>" /> </label> </td> <td> <label> <input type="text" name="ttl<?php echo $count ?>" onkeyup="sum1()" /> </label> <input name="NoOfRow" id="NoOfRow" type="hidden" size="4" value="<?php echo $count ?>"> </form> </td> </tr> <?php echo $count; } ?> </table> please help me for the above code to get the sum of day1 day2 day3 onkeyup to get the total im really confusing above this plzz help me for to get the ttl value when key in values plzz help me ......................... give me smaple code also Hi there, I have an ajax search function. I have an input text field where I type in what I want to search for, but I would like the search to be delayed of a few miliseconds before the ajax search is called. How could I do that? The search field: Code: <input type="text" onkeyup="searchPlayer(this.value)"> The javascript function: Code: function searchPlayer(str)
{
here is my ajax search...
}
I tried different ways but I don't seem to be able to delay the searchPlayer function. Any help on that? Should I use setTimeout on the input field, or in my function or in another function? And how do I pass the 'this.value' to my searchPlayer function if using setTimeout? I am lost... Thanks in advance! I'm working on a script to check password strength "onkeyup",so when the user enters a password after every character i call a function to check the passwords strength.I'm almost ready,but i stucked with one thing: I want to check the same characters in the password,so i can deduct some point from the score if there are identical characters. Here is my code: PHP Code: var multis = 0; for(var x = 1; x < passLength; x++) { actChar = new RegExp(password.charAt(x),"g"); multis += password.match(actChar).length; } I know it seems an easy task,but i've spent at least 6 hours with it,(the first pitfall was that i didn't know the RegExp function and took my variables into the match() function,i think you can imagine the results)and i just can't figure this out,i always get crazy results,i've tried a few more versions as well without any luck. Thx in advance for anybody who can help me! I'm trying to output something in a separate div if the information entered in the form is invalid. It is simply not working, no errors. Code: <script type="text/javascript" language="javascript">
function validateIGN(ign) {
var validign = /^[a-zA-Z0-9]{1,30}$/;
if (!validign.test(ign)) {
document.getElementById.ignErrors.innerHTML = "<p>Your IGN is not formatted properly.";
}
else {
}
}
</script>
Heres the HTML where the onkeyup is.. Code: <form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post">
<h2>Fill out this form if you want to be notified when the website is up!</h2><br/>
<center><table class="twoslot">
<tr>
<td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="return validateIGN(newsletter.ign.value);" /></td>
</tr>
<br/>
<tr>
<td>E-mail:</td><td><input type="text" name="email" /></td>
</tr>
<br/>
<tr>
<td>
<center>
<input type="submit" value="Submit" />
</center>
</td>
</tr>
</table></center>
<span style="font-size: .5em;">This is not working yet</span>
</form>
Input from Chromes on-screen keyboard and a form text field with an onchange or onkeyup function call doesn't seem to work. Can you think of a way around it? Cheers
What I want is a textbox that the user can enter information into. When they press a key the onkeyup event will simulate a function. All that I can do. The function needs to automatically scroll down the page to the anchor that corresponds to the number the user entered. The web page is a factor finding program. You can enter 2 numbers and it finds all the factors of all the numbers between the 2 you entered. Here is the link: http://factorfinder.tumblr.com/ As you can see, when you try to find factors of numbers a new window opens and there is a search box in the top left. Unfortunately, it doesn't work. If you want to check out the code look at the web page but here is the bit that creates the new window Code: function DisplayFactors(FactorsFound, Input, Maximum, ShowFactors, ShowPrimeFactors){
FactorsWindow = window.open("", "", "location = no, menubar = no, personal = no, scrollbars = yes, status = no, toolbar = no, resizable = no, width = 580%, height = 600%, left = 720%, top = 100%")
FactorsWindow.document.write("<div id = 'TheHeader' style = 'position: fixed; left: 0; top: 0; width: 100%; height: 15%; z-index: 2; background-color: white; border-bottom: 3px dashed black;'><table style = 'position: relative; left: 2%; top: 25%; font-size: 24px; font-weight: bolder; text-decoration: underline;'><tr><td>The Factor Finding Window</td></tr></table><table align = 'right' style = 'position: relative; top: -25%;'><tr><td>Search For The Number:</td></tr><tr><td><input type = 'text' id = 'SearchNumber_txt' maxlength = '12' onkeyup = 'opener.Search()'/></td></tr></table></div>")
FactorsWindow.document.write("<div id = 'TheBody' style = 'position: absolute; left: 0; top: 20%; width: 100%; height: 80%; z-index: 1; background-color: white;'>")
}
function Search(){
FactorsWindow.location.hash = "#Factor" + FactorsWindow.document.getElementById("SearchNumber_txt").value
//This is the bit I need to change because it currently doesn't work
}
also, this is the bit where I place the anchors in the array Code: FactorsFound.push("<a name = 'Factor'" + Input2 + "><b>The Factors of " + Input2 + " a </b></a><p style = 'margin: 0, 0, 25px, 0; position:relative; left:20px;'>")
Ultimately I need it so that when the onkeyup event is triggered it scrolls down the window to the anchor that corresponds to the number entered. I will validate the numbers entered after I find out how to do it. I mean, If the user enters the number 9 and the Factor Window is only displaying numbers 2 - 6, then I'll add an alert message or something. I'll cross that bridge when I get to it. I couldn't find this anywhere on the internet. Hi All, I have a page which i am setting up for my local football team, and the javascript part of the page which is a 'news' rotator which i need to ammend. at the moment the tabs on the right of the 'news' rotator are linked to a certain page but nothing happens when you click on them? and i dont know enough javascript to ammend my code to make it so that it send the user to the linked page here is my js file Code: /*
* faded 0.3.1 - jQuery plugin
* written by Nathan Searles
* http://nathansearles.com/faded/
*
* Copyright (c) 2009 Nathan Searles (http://nathansearles.com/)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
* Compatible with jQuery 1.3.2+
*
*/
if(typeof jQuery != "undefined") {
jQuery(function($) {
$.fn.extend({
faded: function(options) {
var settings = $.extend({}, $.fn.faded.defaults, options);
return this.each(
function() {
if($.fn.jquery < "1.3.1") {return;}
var $t = $(this);
var $c = $t.children(":nth-child(1)");
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
var total = $c.children().size();
var next = 0, prev = 0, number = 0, currentitem = 0, restart = 0, restartinterval = 0;
var loaded,active,imgSrc,clicked,current;
if (o.random) {
$.fn.reorder = function(callback) {
function randOrd() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.hide();
var indices = new Array();
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randOrd);
$.each(indices,function(j,k) {
var $child = $children.eq(k);
var $clone = $child.clone(true);
$clone.show().appendTo($this);
if (callback !== undefined) {
callback($child, $clone);
}
$child.remove();
});
}
}));
};
$c.reorder();
}
function pause() {
clearInterval(autoplay);
clearTimeout(restart);
restart = setTimeout(function() {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
},o.autorestart);
}
$c.css({position:"relative"});
$c.children().css({
position:"absolute",
top: 0,
left: 0,
zIndex: 0,
display:"none"
});
if (o.autoheight) {
$c.animate({height: $c.children(":eq(0)").outerHeight()},o.autoheight);
}
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false;
});
}
if (o.sequentialloading&&$c.children()[0].tagName=="IMG") {
$c.css({background:"url("+o.loadingimg+") no-repeat 50% 50%"});
imgSrc = $("img:eq(0)",$c).attr("src");
$("img:eq(0)",$c).attr("src", imgSrc).load(function() {
$(this).fadeIn(o.speed,function(){
loaded = true;
});
});
} else {
$c.find(":eq(0)").fadeIn(o.speed,function(){
loaded = true;
});
}
if (o.bigtarget) {
$c.css({"cursor":"pointer"});
$c.click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
}
if (o.autoplay) {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
pause();
}
$("."+o.nextbtn,$t).click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
$("."+o.prevbtn,$t).click(function(){
animate("prev");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
function animate(dir,clicked,current){
if (!active&&loaded) {
active=true;
switch(dir) {
case "next":
prev = next;
next = currentitem*1+1;
if (total === next) { next = 0; }
break;
case "prev":
prev = next;
next = currentitem*1-1;
if (next === -1) { next = total-1; }
break;
case "pagination":
next = clicked;
prev = current;
break;
}
if (o.pagination) {
$(".pagination li.current",$t).removeClass("current");
$(".pagination li a:eq("+next+")",$t).parent().addClass("current");
}
if (o.crossfade) {
$c.children(":eq("+next+")").css({zIndex:10}).fadeIn(o.speed,function(){
$c.children(":eq("+prev+")").css({display:"none",zIndex:0});
$(this).css({zIndex:0});
currentitem = next;
active = false;
});
} else {
$c.children(":eq("+prev+")").fadeOut(o.speed,function(){
if (o.autoheight) {
$c.animate({height: $c.children(":eq("+next+")").outerHeight()},o.autoheight,function(){
$c.children(":eq("+next+")").fadeIn(o.speed);
});
} else {
$c.children(":eq("+next+")").fadeIn(o.speed);
}
currentitem = next;
active = false;
});
}
}
}
}
);
}
});
$.fn.faded.defaults = {
speed: 300,
crossfade: false,
bigtarget: false,
sequentialloading: false,
autoheight: false,
pagination: "pagination",
autopagination: true,
nextbtn: "next",
prevbtn: "prev",
loadingimg: false,
autoplay: false,
autorestart: false,
random: false
};
});
}
not sure why it wont load the url when clicked apon? can anyone please help? many thanks Luke Could you please help. I came up with javascript functions that would apply a style sheet to an xml document during the runtime but i get the following error: Automation server cannot create object. Below is the code (javascript): <html> <head> <title>SORT</title> <head> <body bgcolor="#FFFFFF"> <form name="VIEW" method="post" action> <p> <input type="text"> </p> <p> <input type="radio" name="optAscending" value="radiobutton" onClick="javascript:displayAscending();">Ascending </p> <p> <input type="radio" name="optDescending" value="radiobutton" onClick="javascript:displayDescending();">Descending <p> <input type="radio" name="optReset" value="radiobutton" onClick="javascript:displayReset();">Reset </p> </form> </body> <script language="javascript"> function displayAscending() { document.VIEW.optDescending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); xsltobj.stylesheet = xsldocobj; var xmldocobj = new ActiveXObject("Msxml2.FreeThreadDOMDocument.4.0"); xmldocobj.async = false; xmldocobj.load("EMP.xml"); xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayDescending() { document.VIEW.optAscending.checked=false; document.VIEW.optReset.checked=false; var xsltobj = new ActiveXObject("Msxml2.XSLTemplate.4.0"); var xsldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); var xslprocobj; xsldocobj.async = false; xsldocobj.load("EMP.xsl"); var xmldocobj = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0"); xmldocobj.async = true; xmldocobj.load("EMP.xml"); xsltobj.stylesheet = xsldocobj; xslprocobj = xslt.createProcessor(); xslprocobj.input = xmldocobj; xslprocobj.Transform(); //arlet(xslProc.output); parent.FIRST.document.write(xslProc.output); } function displayReset() { parent.First.document.location="first.htm"; document.VIEW.optAscending.checked=false; document.VIEW.optDescending.checked=false; } </script> </html> And a style sheet that would be applied to an xml document <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <body> <table border="2" bgcolor="blue"> <tr> <th>ID</th> <th>NAME</th> <th>DESIGNATION</th> <th>ADDRESS</th> <th>DOB</th> <th>DEPARTMENTS</th> </tr> <xsl:for-each select="EMPDETAILS/EMPLOYEE"> <tr> <td><xsl:value-of select="ID"/></td> <td><xsl:value-of select="NAME"/></td> <td><xsl:value-of select="DESIGNATION"/></td> <td> <xsl:value-of select="ADDRESS/Street"/> <xsl:value-of select="ADDRESS/Apartment"/> <xsl:value-of select="ADDRESS/City"/> <xsl:value-of select="ADDRESS/State"/> <xsl:value-of select="ADDRESS/Zipcode"/> </td> <td><xsl:value-of select="DOB"/></td> <td><xsl:value-of select="DEPARTMENT"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> I'm designing a page that uses javascript+css for enhanced interaction. However, if javascript is disabled, I'd still like the page to be functional, albeit less fancy. Likewise, if css is disabled, it still needs to be functional. Finally, if both js+css are disabled, the page will be quite bare but still usable. For example, I use javascript to set a css style that hides certain panels of content. JS is used to toggle these and all is fine. If JS is disabled, then the css isn't applied, and all the content is visible (though not too pretty). If CSS is disabled, the inline CSS applied by the JS works fine. Finally, if both are disabled, all the content is visible. I'm wondering what's the best way to do this. Currently, I set the styles like this in the js file: Code: function initialize() {
// set styles, for example:
document.getElementById("panel").style.display = "none";
}
var onloadFlag = false;
document.onreadystatechange = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
// for older browsers
window.onload = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
The problem that sometimes comes up is I see the "fallback" styles briefly, before the JS kicks in and applies the enhanced css. How can I avoid this? |
|||||||