|
JavaScript - On Blur And Span Tags
I have been working on this code for days and I cannot get it right!!! Can anyone please give me any pointers. It should have an error message that pops up on same line as text boxes when into is not entered property! Thanks in advance!
NewBanks <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function validate(){ var errorList = new Array(); var eMail = document.getElementById("email").value; var passwrd = document.getElementById("password").value; var cPassword = document.getElementById("confirmPassword").value; var secQuest = document.getElementById("securityQuestion").value; var secAns = document.getElementById("securityAnswer").value; var regEx = /^\s*[\w\\+_]+(\.[\w\\+_]+)*\@[\w\\+_]+\.[\w\\+_]+(\.[\w\\+_]+)*\s*$/; if(!regEx.test(eMail)){ errorList[errorList.length] = ("You must enter a valid email address!<br/>"); valid = false; } if(passwrd == "" || passwrd.length <6){ errorList[errorList.length] = ("Your password must be 6 characters long! <br/>"); valid = false; } if(passwrd != cPassword){ errorList[errorList.length] = ("Passwords do not match! <br/>"); valid = false; } if (secAns == ""){ errorList[errorList.length] = ("Please enter your Security Answer! <br/>"); valid = false; } if(errorList.length > 0){ for(var i = 0; i < errorList.length; i++){ document.getElementById("errors").innerHTML += errorList[i]; } return false; } else return true; window.onload = function() { 0(); } } </script> </head> <body> <form id="login" action="confirm.html"method="get" onsubmit="return validate();"/> Email: <input type="text" name="email" id="email" onblur="validate(this);" /> <br/><span id = "Invalid Email"></span> Password: <input type="text" name="password" id="password" onblur="validate(this);" /> <br/><span id = "Incorrect Password"></span> Confirm Password: <input type="text" name="password" id="confirmPassword" onblur="validate(this);" /> <br/><span id = "Invalid password"></span> Security Question: <select id = "securityQuestion" onblur="validate(this);"> <option value= "maiden" >What is your mother's maiden name </option> <option value= "animal"> What is your favorite animal </option> </select> <br/> <input type="text" name="securityAnswer" id="securityAnswer" onblur="validate(this);" /> <br/><span id = "Security Answer does not match"></span> <p><input type = "Submit" /></p> <span id = "errors"> </span> </form> </body> </html> Similar TutorialsHi, please can someone help I wanted to blur the text in my formfield when a user clicks on it?! Code: <script language="javascript">
function cbevent()
{
var xx = document.loginform.myusername.blur();
}
</script>
<form name="loginform">
<input type="text" name="myusername" onMouseClick="cbevent()" value="Enter your email address here" />
Hi all, A piece of code I have been working on has a small issue with bluring off a div and I can't working out why. Basically what I do is append divs to the DOM and on double click I make them editable and when I blur they are none editable and I append a new div into the document. I have quickly knock up a small piece of code to illustrate the problem ... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css">
.dropArea {
color:#757575;
font-weight:bold;
display:block;
margin:0px;
border: 1px dashed #999999;
background-color:#DDDDDD;
left:10px;
right:10px;
/*width:auto;*/
text-align:center;
line-height:20px;
}
.textEditArea {
display:block;
margin-bottom:10px;
border: 1px dashed #999999;
background-color:inherit;
left:10px;
right:10px;
padding:5px;
width:auto;
}
</style>
<script>
function makeEditable(activeZone) {
if (activeZone.className == "dropArea") {
activeZone.innerHTML = "";
}
activeZone.contentEditable = true;
activeZone.className = "textEditArea";
}
function doneEditing(activeZone) {
// if no HTML added, make it a drop zone
if (trim(activeZone.innerHTML) == "") {
activeZone.className = "dropArea";
activeZone.innerHTML = "Drop items from or double click to add text";
} else if (activeZone.addDropZoneAlready == undefined) {
// add a new drop zone underneath
activeZone.title = "Double click to edit text";
activeZone.addDropZoneAlready = "true";
activeZone.zoneType = "textDisplay";
addNewDropZone();
}
activeZone.contentEditable = false;
}
function addNewDropZone() {
var dropArea = document.createElement("div");
dropArea.className = "dropArea";
var appendTo = document.body;
appendTo.appendChild(dropArea);
dropArea.ondblclick = function () { makeEditable(dropArea); };
dropArea.onblur = function () { alert('done'); doneEditing(dropArea); };
dropArea.innerHTML = "Drop items or double click to add text";
}
</script>
</head>
<body onload="addNewDropZone();">
<div onDblClick="this.contentEditable=true;" onBlur="this.contentEditable=false;alert('Done!');" style="background-color:#C0C0C0; width: 500px; height:200px;"></div>
</body>
</html>
The div in the body already works as expected, it alerts "Done!" however divs I append into the document have to blur twice before the onblur fires? I just don't undestand why its doing it. Anybody have any ideas as to what is happening? Thanks, Dale Hi, I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. I have these "editable" divs in my document. When you click them, a text box comes up and you type something and push enter. It changes what's in the div. There is also a blur event associated with the text box. When the user tabs or clicks away, it fires the blur event. Here lies the problem. I have other elements on the page that are clickable. I don't want those clickable things to fire their events if the user is clicking away from the text box, ie. the blur event. This isn't a problem is the user pushes tab, for instance. So my thought was that if i know how the user blurred (via keyboard, or clicking) i could take the appropriate action. Any ideas? Hi guys, I have the following code that should hide the dropdown part of a select box when clicked (don't ask why, this is part of a separate project). Please see a simple example below: Code: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<select name="select1" id="select1" onfocus="$(this).blur();">
<option value=""></option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
This all works fine in IE and FF but in chrome the options are still shown after clicking the element. I've been racking my brains for hours on this and, no matter what method I use, I can't get this to work correctly in Chrome. Can anyone suggest a way I can get this to work? Thanks in advance! I have a JavaScript that remembers the values of a form by creating cookies for each input element onblur. I cannot figure out though how to exclude one input field from being remember. It would be document.getElementsByTagName('input')[15] Every time I try to add an if/else statement in using that line, the script doesn't work altogether. Code: window.onload = function() {
rememberFormInputs('rma', 'input-');
}
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name+"="+escape(value) +
((expires) ? ";expires="+expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}
/**
* Get a cookie value
* @param string cookie name
*/
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
/**
* Remebers form inputs after you fill them in
* @param string form id to remember fields
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
var form = document.getElementById(form_id);
var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
var el = els.item(i);
if (el.type == 'text') {
el.onblur = function() {
var name = this.name;
var value = this.value;
setCookie(prefix + name, value, 90);
};
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
el.value = old_value;
}
}
}
}
Does anyone have a solution? I would really appreciate it :] Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. Hi I am working on PHP/javascript development. I want to insert a span code into DB how can i do? here is the code: Code: <html>
<head>
<script type="text/javascript">
var xScroll, yScroll, timerPoll, timerRedirect, timerClock;
function initRedirect(){
if (typeof document.body.scrollTop != "undefined"){ //IE,NS7,Moz
xScroll = document.body.scrollLeft;
yScroll = document.body.scrollTop;
clearInterval(timerPoll); //stop polling scroll move
clearInterval(timerRedirect); //stop timed redirect
timerPoll = setInterval("pollActivity()",1); //poll scrolling
//timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
//timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
timerRedirect = setTimeout("mySubmit()",60000);
//for tracking only
clearInterval(timerClock);
document.getElementById("clock").innerHTML="0";
timerClock=setInterval("document.getElementById('clock').innerHTML=parseInt(document.getElementById('clock').innerHTML,10)+1",1000);
//end tracking
}
else if (typeof window.pageYOffset != "undefined"){ //other browsers that support pageYOffset/pageXOffset instead
xScroll = window.pageXOffset;
yScroll = window.pageYOffset;
clearInterval(timerPoll); //stop polling scroll move
clearInterval(timerRedirect); //stop timed redirect
timerPoll = setInterval("pollActivity()",1); //poll scrolling
// timerRedirect = setInterval("location.href='newtask_process.php'",100000); //set timed redirect
// timerRedirect = setInterval("mySubmit()",100000); //set timed redirect
timerRedirect = setTimeout("mySubmit()",60000);
//for tracking only
clearInterval(timerClock);
document.getElementById("clock").innerHTML="0";
timerClock=setInterval("document.getElementById('clock').innerHTML=parseInt(document.getElementById('clock').innerHTML,10)+1",1000);
//end tracking
}
//else do nothing
}
function mySubmit()
{
document.forms.formdesc.submit2.click();
}
function pollActivity(){
if ((typeof document.body.scrollTop != "undefined" && (xScroll!=document.body.scrollLeft || yScroll!=document.body.scrollTop)) //IE/NS7/Moz
||
(typeof window.pageYOffset != "undefined" && (xScroll!=window.pageXOffset || yScroll!=window.pageYOffset))) { //other browsers
initRedirect(); //reset polling scroll position
}
}
document.onmouseout=initRedirect;
document.onmousemove=initRedirect;
document.onclick=initRedirect;
document.onkeydown=initRedirect;
window.onload=initRedirect;
window.onresize=initRedirect;
</script>
</head>
<body>
Time: <span id="clock" style="font-weight:bold">0</span>
</body>
</html>
I can see the clock on a page but i want to insert into DB. How can I do that?? I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
function checkTextArea(fromto){
var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;
if (destination=="1") {
var limit = "500";
}
else {
var limit = "1000";
}
if (document.getElementById(id)){
var txt = document.getElementById(id).value;
if (txt.length>limit){
document.getElementById(id).value = txt.substr(0,limit);
}
len = document.getElementById(id).value.length;
span_id = "span" + id;
if (document.getElementById(span_id)){
document.getElementById(span_id).innerHTML = (limit-len);
} // if
} //if
} //function
function chardisplay(fromto) {
var deststring = "dest";
var identifier = deststring + fromto;
// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
// also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);
var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;
if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}
else {
document.getElementById(spanidentifier).innerHTML = "1000";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="myurl">
<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>
<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>
<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>
Hello, I have looked through a tutorial that does text gradient without the use of images. I found this tutorial: http://www.thomasfrank.se/text_color_gradients.html However, only the first "SPAN CLASS" gets gradiented and the other spans don't. In the bottom of the page it says: Quote: If you call the gradientText.set() without any arguments it will go looking for all span tags with class names starting with gradient_ and apply gradients to them But I do not know what it means, I have tried learning a bit of Javascript and I think it could mean something like "if something is something, then". But I'm not sure. Please help, thanks. Hi All, I'm pretty sure that this will need a javascript solution but could an admin please move it if I have placed it in the wrong section! Basically I am populating a span id with a number value... Code: <div id="behaviour_management" style="overflow: auto;"> Behaviour Management <br><br> <span id="behaviour_management_rating">4</span> What I need to do is grab that value... 4 in this case and pass it to a hidden field or via another method so that it because part of the form for processing on the next page. I've tried a couple of things but I am very shakey on javscript and have a very limited knowledge of it. I've basically tried (and managed) to assign the value to a javscript var by using getElementByID... Code: <script type="text/javascript">
function getRatings() {
var s1 = document.getElementById('behaviour_management_rating').innerHTML;
}
</script>
Code: <input type="image" name="submit" src="images/search_list_btn.png" onclick="getRatings()"/> my next plan was to pass that var to a hidden input at which point I am becoming stuck. Can someone tell me if this is even possible and if so perhaps they would be kind enough to point me in the right direction. Any help would be greatly appreciated.. Many thanks Greens85 Hey all, my first post here. I'm primarily a designer but need to get more into the code aspect of things (and will be getting jQuery asap), but at the moment i'm very behind on time on a project and could use some quick help. Basically, I'm making a dynamically loading text box input area for RMA returns for our products. But thats kind of irrelevant, here's my question: I have an external style sheet with only this in it (more will be added later for future sections, thats why im making it it's own "css-forms.css" file: Code: .formpad { padding:3px 3px 3px 3px; }
In my main .html, some of my javascript for my dynamic table contains lines like these: Code: var esnImeiInput = "<INPUT type=\"text\" name=\"esn_imei[]\" size=\"20\">";
var invoiceInput = "<INPUT type=\"text\" name=\"invoice[]\" size=\"8\">";
var datePurchaseInput = "<INPUT type=\"text\" name=\"date_purchase[]\" size=\"8\">";
var noteInput = "<INPUT type=\"text\" name=\"notes[]\" size=\"18\">";
var trOpenTag = "<tr>";
var trCloseTag = "</tr>";
var tbOpenTag = "<table>";
var formRows = modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";
for(x=0;x<10;x++)
{
formRows += modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";
}
Where inside those vars (INPUT's) would i REFER to the 'class' of .formpad? Basically I just want to add cellpadding to the table that is being dynamically loaded. If anyone has time to help via IM that'd be cool too, this is pretty easy stuff for true coders. (the test page for all of this is currently at: http://planetcellinc.com/rma-rev726.html Any help appreciated, thanks! -Hrl2k I'm integrating a JavaScript typing tutorial to my website. But I'm not able to store the value to the database. In the below code you can see the speed is updated in a html span. The id of the tag is speed(<span id="speed"></span>). This code will automatically update when user start typing. I want to update this to a database when user press submit button. But i cant able to. Is there any way to input the speed to database ? Please go through the below code and suggest me what i can do....? Code:
<script type="text/javascript">
//<![CDATA[
var garray = new Array();
var garrayIndex = -1;
var gtext = "";
var gindex = 0;
var goldPressed = 0; //previous pressed key code
var goldTarget = 0; //previous target key code
var gtarget = 0;
var gpressed = 0;
var ggood = 0;
var gtotal = 0;
var gtime = 0;
var gkeytime = 0;
function setup() {
setEvents();
//change this array to suit your needs but note that indices
//must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";...
garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad";
//more similar lines can easily be added above, dont forget to get the index right!
garrayIndex = -1;
next();
}
function setPatternInit() {
//#b note: once we did this using innerHTML but this caused
//a leakage of handles in ie
var pat = document.getElementById("pattern");
for(; {
if (pat.hasChildNodes()) {
pat.removeChild(pat.lastChild);
}
else break;
}
var cname = "done";
for (j=0; j<gtext.length; j++) {
var ch = gtext.charAt(j);
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";
var kid = document.createElement("span");
kid.className = cname;
var txt = document.createTextNode(ch);
kid.appendChild(txt); //#b innertext doesnt work on firefox
pat.appendChild(kid);
}
}
function setPattern() {
var pat = document.getElementById("pattern");
var kids = pat.childNodes;
var cname = "done";
for (j=0; j<gtext.length; j++) {
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";
var kid = kids[j];
kid.className = cname;
}
}
function mapToBoard(code) {
if ((code>=97)&&(code<=108)) return (code-32);
if ((code>=110)&&(code<=122)) return (code-32);
if ((code>=65)&&(code<=90)) return code;
if ((code>=48)&&(code<=57)) return code;
if ((code==32)) return code;
if ((code==44)||(code==46)||(code==47)||(code==59)) return code;
return 0; //not on our board picture
}
function setBoard() {
var letter;
var elt;
var c;
var s;
if (goldTarget!=0) {
c = mapToBoard(goldTarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (goldPressed!=0) {
c = mapToBoard(goldPressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (gtarget!=0) {
c = mapToBoard(gtarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "target";
elt.className = s;
}
}
if (gpressed!=0) {
c = mapToBoard(gpressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "pressed";
elt.className = s;
}
}
}
function nextPattern() {
goldTarget = gtarget;
goldPressed = gpressed;
if (++garrayIndex == garray.length) garrayIndex = 0;
gtext = garray[0]; gindex = 0;
gpressed = 0;
setPrompt();
}
function prevPattern() {
goldTarget = gtarget;
goldPressed = gpressed;
if (--garrayIndex < 0) garrayIndex = garray.length - 1;
gtext = garray[garrayIndex]; gindex = 0;
gpressed = 0;
setPrompt();
}
function next() {
nextPattern();
setPatternInit();
setBoard();
}
function prev() {
prevPattern();
setPatternInit();
setBoard();
}
function skip(e) {
next();
return false;
}
function back(e) {
prev();
return false;
}
function setEcho(c, isOK) {
var s;
if (c<' ') c=' ';
var s = "["+c+"]";
if (!isOK) s += " ..OOPS!"
var elt = document.getElementById("echo");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function setPrompt() {
var ch = gtext.charAt(gindex);
gtarget = ch.charCodeAt(0);
}
function adjustStatistics(ch) {
return; //could count errors by character
}
function updateSpeed(ok) {
var t = (new Date()).getTime();
var dt = (t-gtime);
gtime = t;
if (dt > 5000) return; //ignore sleepy user
gkeytime += dt;
var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + "";
var elt = document.getElementById("speed");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function updateScore(ok) {
if (ok) ggood++;
gtotal++;
updateSpeed(ok)
var s = ggood.toFixed(0) + "";
var elt = document.getElementById("count");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
s = (gtotal-ggood).toFixed(0) + "";
elt = document.getElementById("accuracy");
txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
var s = (gkeytime/1000).toFixed(2) + " s";
var elt = document.getElementById("time");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function reset(e) {
window.location.reload();
}
function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html
//document.onkeydown=debugKey; //#b
document.onkeypress=debugKey;
}
function debugKey(evt) { //#b
var e = (window.event) ? window.event : evt; //#b
var k = (e.which)? e.which : e.keyCode;
var f = filterKeyCode(k);
var s = "k="+k+",f="+f;
alert(s);
return false;
}
function setEvents() { //#b
document.onkeydown=down; //#b
document.onkeypress=press;
(document.getElementById('skip')).onmousedown=skip;
(document.getElementById('back')).onmousedown=back;
(document.getElementById('reset')).onmousedown=reset;
}
function cleanup() {
//pointless, really
document.onkeydown=null; //#b
document.onkeypress=null;
(document.getElementById('skip')).onmousedown=null;
(document.getElementById('back')).onmousedown=null;
(document.getElementById('reset')).onmousedown=null;
}
function filterKeyCode(code) { //from key down (0 to ignore)
//note: user must have num lock set if they want to use keypad numbers
if ((code>=65)&&(code<=90)) return code; //alpha
if ((code>=48)&&(code<=57)) return code; //numberic
if (code==32) return code; //blank
if ((code>=96)&&(code<=105)) return code; //number pad digits
if ((code==13)||(code==16)) return code; //enter, shift
if ((code>=106)&&(code<=111)) return code; //number pad operators
if ((code>=186)&&(code<=192)) return code; //punctuation
if ((code>=219)&&(code<=222)) return code; //punctuation
return 0;
}
function filterCode(code) { //from key press as ascii char code (0 to ignore)
if ((code==13)||(code==16)) return code; //enter and shift are allowed
if (code<32) return 0;
if (code>=127) return 0;
return code;
}
function capsLockFilter(e, pressed) { //#b many problems making this cross browser!
//#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)?
var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b
var locked = (((pressed > 64) && (pressed < 91) && (!shifted))
|| ((pressed > 96) && (pressed < 123) && (shifted)));
if (locked) alert("caps lock!");
}
function down(evt) { //#b
var e = (window.event) ? window.event : evt; //#b
var rawcode = (e.which)? e.which : e.keyCode;
pressed = filterKeyCode(rawcode);
if (pressed > 0) return true;
if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true;
if (typeof(e.stopPropagation)!="undefined") e.stopPropagation();
return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!)
}
function press(evt) { //#b
//#b should work in ie, firefox, safari(hopefully), opera(hopefully)
var e = (window.event) ? window.event : evt; //#b
var pressed = 0;
var wc = -1;
var kc = -1;
var cc = -1;
if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie
if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox
if (typeof(e.which)!="undefined") wc = e.which; //old mozilla
if ((kc>=0)&&(cc>=0)) { //firefox
pressed = cc;
}
else if (kc>=0) pressed = kc; //ie
else if (wc>=0) pressed = wc; //old mozilla
//alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc);
pressed = filterCode(pressed);
if (pressed==0) {
if (kc==13) return skip(); //#b firefox
else return false;
}
if (pressed==13) return skip(); //#b ie
capsLockFilter(e, pressed); //hmm
var c = String.fromCharCode(pressed); //ie from ascii code
var ch = gtext.charAt(gindex);
var ok = (c==ch);
goldPressed = gpressed;
gpressed = pressed;
goldTarget = gtarget;
if (ok) {
gindex++;
if (gindex==gtext.length) {
if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) {
alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!');
setPatternInit();
}
else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){
alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.')
setPatternInit();
}
else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){
alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.')
setPatternInit();
}
else
alert ('Focus on accuracy first, then go for speed!');
setPatternInit();
}
else setPattern();
gpressed = 0;
setPrompt();
setEcho(c, true);
updateScore(true);
}
else {
setEcho(c, false);
updateScore(false);
setPattern()
}
setBoard();
return false;
}
//</XMLCDATA>
</script>
This is my HTML Code : Code:
<body onload="setup()" onunload="cleanup()">
<div id="container1">
<div id="container3">
<div id="body">
<div id="pattern" class="big">
</div>
<div id="prompt" class="prompt">
</div>
<div id="board" class="board">
<div id="row0" class="row0">
<span id="code49">1</span> <span id="code50">2</span> <span id="code51">3</span> <span id="code52">4</span> <span id="code53" style="margin-left:-5px;">5</span> <span id="code54">6</span> <span id="code55">7</span> <span id="code56">8</span> <span id="code57">9</span> <span id="code48">0</span>
</div>
<div id="row1" class="row1">
<span id="code81">Q</span> <span id="code87">W</span> <span id="code69">E</span> <span id="code82" style="font-weight:bold">R</span> <span id="code84">T</span> <span id="code89">Y</span> <span id="code85" style="margin-left: -2px;">U</span> <span id="code73">I</span> <span id="code79">O</span> <span id="code80">P</span>
</div>
<div id="row2" class="row2">
<span id="code65">A</span> <span id="code83">S</span> <span id="code68">D</span> <span id="code70" style="font-weight:bold;">F</span> <span id="code71" style="margin: 0 0 0 -5px;">G</span> <span id="code72">H</span> <span id="code74" style="font-weight:bold;">J</span> <span id="code75">K</span> <span id="code76">L</span> <span id="code59">;</span>
</div>
<div id="row3" class="row3">
<span id="code90">Z</span> <span id="code88">X</span> <span id="code67">C</span> <span id="code86"
style="font-weight:bold">V</span> <span id="code66">B</span> <span id="code78">N</span> <span id="code77" style="font-weight:bold">M</span> <span id="code44">,</span> <span id="code46">.</span>
</div>
<div id="row4" class="row4">
<span id="code32">[SPACE]</span>
</div>
<div id="scores">
<div class="count">Characters:
<span id="count"></span>
</div>
<div class="accuracy">Errors:
<span id="accuracy"></span>
</div>
<div class="speed">WPM:
<span id="speed"></span>
</div>
<div class="time">Time:
<span id="time"></span>
</div>
</div>
<div align="center">
<button id="reset" class="button123" name="reset" align="center">Restart Exercise</button>
</div>
</div>
<div id="echo" class="echo" style="display:none;">
[]
</div>
<div style="display:none;">
<button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut)
</div>
<div style="display:none;">
<button id="back" class="button123" name="back">back</button> to previous line
</div>
</div>
</div>
Ok, so i got two buttons made with css, that i want to link to two different text that will appear in a <div> when i press them. Quote: <a href="#" class="title4"value="Click" onclick="document.getElementById('introduktion').innerHTML=''"/> Introduktion </a> <a href=".pdf" class="title4" > CV </a> <a href="#" class="title5"value="Click" onclick="then var name =.innerHTML;document.getElementById('presentation').innerHTML=''"/ >Presentation </a> </div> <div class="post"> <div class="text" style="; height:387px; width:400px; overflow:auto;"> <br> <span id="introduktion" href="#"> <font size="2"> text 1 </span> <span id="presentation" href="#">text 2 </span> The button works, but when i press them more than once everything disappears... Do anyone have any idea on how to solve this problem? I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> I am trying to update the text in a span with a date (which is working fine), but I also want to format that date before it is updated in the span. For example, in the text area I input a date (format: YYYY-MM-DD HH:MM:SS), and I'd like to output between the span tags M-D-YYYY. Does that make sense? I'm totally lost here and hoping someone can help me out. Here is the javascript. Code: function show_post_date() {
var ele = document.getElementById("post_date");
var text = document.getElementById("new_post_date");
// Get the date value, then format it
var formatted_date = ele.value;
// THIS IS WHAT I'VE TRIED, BUT NOTHING IS UPDATED INTO THE SPAN IF I INCLUDE THIS
var curr_date = formatted_date.getDate();
var curr_month = formatted_date.getMonth();
var curr_year = formatted_date.getFullYear();
formatted_date = curr_date + "-" + curr_month + "-" + curr_year;
// END SECTION OF WHAT I'VE TRIED
if(ele.value != "") {
text.innerHTML = formatted_date;
}
}
Here is the element Code: When: <span id='new_post_date' style='font-weight:bold;'></span> <input type="text" name="post_date" id="post_date" value="" onChange='show_post_date()' /> I have a form that loops through several classes from the database. Each is wrapped by a span with an id that matches its 'workshop_id'. When somebody chooses a number of students (greater than 0) from the dropdown for each, I want to change the font color. I've tried what seems like a simple script to do that, but it's not working. It's calling the function, but doesn't change any font colors. Code:
<script>
function highlighter(nameit) {
elementtochange = document.getElementById(nameit);
elementtochange.style.color = orange;
}
</script>
<!-- a PHP loop generates each workshop here, like this.... -->
<span id="selectedclass<?= $c_row['workshop_id'] ?>" style="color:green;" >
<?= $c_row['workshop_title'] ?>
<!-- several other php results echoed -->
</span>
<select style="width:70px;" name="participantqty[<?= $c_row['workshop_id'] ?>]" id="participantqty" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" onChange="highlighter('selectedclass<?= $c_row['workshop_id'] ?>')">
<option value="">select </option>
<option value="1" <?php if(($numberyouthpassed === '1') && ($unique_idpassed === $c_row['workshop_id'])) { echo 'selected="selected"'; } ?> width=45>1 </option>
<option value="2" <?php if(($numberyouthpassed === '2') && ($unique_idpassed === $c_row['workshop_id'])) { echo 'selected="selected"'; } ?> width=45>2 </option>
</select>
Hi all, I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code:
<html>
<head>
Test
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function test(tmpForm) {
window.alert(tmpFrm.elements["weight"].value);
window.alert(tmpForm.elements["error"].innerHTML);
}
</SCRIPT>
</head>
<body>
<form id="form_137" name="form_137">
<input id="weight" name="weight" value="" />
<span id="error" name="error">abc</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
<form id="form_137_down" name="form_137_down">
<input id="weight" name="weight" value="" />
<span id="error" name="error">zzz</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
</body>
</html>
|
|||||||