|
JavaScript - Textbox Working Issue To Lessen The Time In Typing
Good day!
I have a question regarding textbox properties. In my textbox username I want to happen is when I input a letter for example is "l" all the letter started in "l" in my field username was appear, so that the user can choose what she want to type to lessen the time in typing like in the google search. Is it possible?How can I do that? Thank you in advance Similar TutorialsI have a textbox on my webpage where you can enter a title. I then have a button that goes to my javascript and starts a timer. Well if the user presses enter on the text box I want it to start the time. Well it goes to the code, but then like refreshes the website and starts from the start. How can I get around this? When I click the button there is no issues at all. Textbox: <input type="text" id="titleMainT" value="N/A" size="27" onkeypress="startTimer();"/> Button: <input type="button" id="startbutton" value="Start Timer" onclick="startTimer();" /> Hi, While i am binding a value to a text box using java script. It will properly in all browsers other than IE. In IE the value bind as 'undefined' in the text box . so please provide solution for this one. The code sample is given below. In this "Flight Search " is the text box id . I have to bind that value from the previous page selected value. function SelectAirport(val) { var id = val + "_lnkCity"; var lnk = document.getElementById(id); window.opener.document.getElementById("FlightSearch").value = lnk.text; window.opener.document.getElementById("destinationSearch").value = lnk.text; window.close(); } Can somebody help me to find the problem with the below given code, its not working. $(document).on('keyup', ".add_commi", function() { typingTimer = setTimeout(doneTyping, doneTypingInterval); var pro = $(this).attr('id'); var selectvalue = $(this).html(); var id = pro.slice(-2); var amount = $('#amount'+id).html(); var rate = $('#v_rate'+id).html(); //alert('working'); var data = 'cur_amount='+cur_amount +'&cur_rate='+cur_rate+'&commision='+selectvalue; $.ajax({ type: "POST", dataType: "json", url: "http://localhost/agent/buy-currency-calculations/", data: data, success: function(output){ var cus_rate = output.cus_rate; var total = output.total; var tot_commision = output.commision; alert(cus_rate, total, tot_commision); $('#curr_rate'+id).html(cus_rate); $('#tot'+id).html(total); $('#tot_commi'+id).html(tot_commision); } }); return false; }); Reply With Quote 01-09-2015, 02:53 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts cur_amount, cur_rate and selectvalue are supposedly primitive values (like numbers) but you fetch them as HTML code which the interpreting server script certainly can’t process. (if it should be indeed primitives, you should rather consider using form elements for that). despite that jQuery has a method to fetch values off a form, which might be easier to implement, but that depends on the used HTML code. additionally, in your browser’s dev tools you can check the network pane for what values are sent/received in the AJAX call. Hi, I have added a time counter in below code. This is used to track the total time of a project. If a person is going on break, then they will apply the break that stops the time counter. However, once they come back from break and end the break, then time is counting at double speed (two seconds instead at one second). Is there any mistake that I done that made the time counter to increment by 2 seconds instead of 1 second after break. Any help please.... Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Strategy One - Tracker</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
<!-- Script for Current time in text box -->
<script type="text/javascript">
function GetDate()
{
var curDateTime = new Date()
var curHour = curDateTime.getHours()
var curMin = curDateTime.getMinutes()
if(curHour<10) curHour = "0" + curHour
if(curMin<10) curMin = "0" + curMin
document.getElementById('start_time').value = curHour + ":" + curMin;
var row = document.getElementById("end1_time");
var row1 = document.getElementById("start1_time");
row.style.display = 'none';
row1.style.display = 'none';
}
</script>
<!-- End of Script for Current time in text box -->
<!-- Script for Current time in text box -->
<script type="text/javascript">
function GetDate1()
{
var curDateTime = new Date()
var curHour = curDateTime.getHours()
var curMin = curDateTime.getMinutes()
if(curHour<10) curHour = "0" + curHour
if(curMin<10) curMin = "0" + curMin
document.getElementById('end_time').value = curHour + ":" + curMin;
var row = document.getElementById("start1_time");
var row1 = document.getElementById("end1_time");
var row2 = document.getElementById("start2_time");
var row3 = document.getElementById("end2_time");
row.style.display = 'none';
row1.style.display = 'none';
row2.style.display = 'none';
row3.style.display = 'none';
}
</script>
<script type="text/javascript">
function GetDate2()
{
var curDateTime = new Date()
var curHour = curDateTime.getHours()
var curMin = curDateTime.getMinutes()
if(curHour<10) curHour = "0" + curHour
if(curMin<10) curMin = "0" + curMin
document.getElementById('break_time_out').value = curHour + ":" + curMin ;
var row = document.getElementById("end2_time");
row.style.display = '';
}
</script>
<script type="text/javascript">
function GetDate3()
{
var curDateTime = new Date()
var curHour = curDateTime.getHours()
var curMin = curDateTime.getMinutes()
if(curHour<10) curHour = "0" + curHour
if(curMin<10) curMin = "0" + curMin
document.getElementById('break_time_in').value = curHour + ":" + curMin ;
}
</script>
<script type="text/javascript">
function tout1()
{
var temp= document.tracker.start_time.value;
if(temp.length>0)
{
var row1 = document.getElementById("end1_time");
var row2 = document.getElementById("start2_time");
row1.style.display = 'none';
row2.style.display = 'none';
}
else
{
var row = document.getElementById("start1_time");
var row1 = document.getElementById("end1_time");
var row2 = document.getElementById("start2_time");
row.style.display = 'none';
row1.style.display = 'none';
row2.style.display = 'none';
}
}
function tout2()
{
var temp= document.tracker.start_time.value;
if(temp.length>0)
{
var row = document.getElementById("start1_time");
var row1 = document.getElementById("end1_time");
var row2 = document.getElementById("start2_time");
var row3 = document.getElementById("end2_time");
row.style.display = 'none';
row1.style.display = 'none';
row2.style.display = 'none';
row3.style.display = 'none';
}
else
{
var row = document.getElementById("start1_time");
var row1 = document.getElementById("end1_time");
var row2 = document.getElementById("start2_time");
var row3 = document.getElementById("end2_time");
row.style.display = '';
row1.style.display = 'none';
row2.style.display = 'none';
row3.style.display = 'none';
}
}
</script>
<script type="text/javascript">
var seconds = 0;
var minutes = 0;
var hours = 0;
function zeroPad(time) {
var numZeropad = time + '';
while(numZeropad.length < 2) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function countSecs() {
var j=document.tracker.hide.value;
if(j=="yes")
{
seconds++;
if (seconds > 59) {
minutes++;
seconds = 0;
}
if (minutes > 59)
{
hours++
minutes = 0;
}
document.tracker.time_utilization.value = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
}
else
{}
}
function startTimer()
{
action = window.setInterval(countSecs,1000);
}
function s()
{
document.tracker.hide.value ="yes";
startTimer();
}
function p()
{
document.tracker.hide.value ="no";
}
</script>
</head>
<body>
<form name="tracker" method="post" action="processor.php" onsubmit="return formCheck(this);">
<label class="formFieldQuestion">Start Time *</label><input readonly class=mainForm type=text name=start_time id=start_time size='30' value=''>
<input type="button" id="start1_time" style="width: 100px" Value="Start Time" onClick="javascript:GetDate();s();"></li>
<label class="formFieldQuestion">End Time *</label><input readonly class=mainForm type=text name=end_time id=end_time size='30' value='' >
<input type="button" id="end1_time" style="width: 100px" Value="End Time" onClick="javascript:GetDate1(); p();" style='display: none'></li>
<input type="hidden" name="hide" />
<label class="formFieldQuestion">Break Time Out </label><input class=mainForm readonly type=text name=break_time_out id=break_time_out size='30' value='' >
<input type="button" id="start2_time" style="width: 100px" Value="Start Time" onClick="javascript:GetDate2();tout1();p();"></li>
<label class="formFieldQuestion">Break Time In </label><input class=mainForm readonly type=text name=break_time_in id=break_time_in size='30' value=''>
<input type="button" id="end2_time" style="width: 100px" Value="End Time" onClick="javascript:GetDate3(); tout2();s();" style='display: none'></li>
<label class="formFieldQuestion">Time Utilization</label><input class=mainForm type=text name=time_utilization id=time_utilization size='30' value='' readonly></li>
<br /> <br />
<input id="saveForm" class="mainForm" type="submit" value="Submit" style="width : 100px"/>
</form>
</body>
</html>
I know there's a way to do it in Jquery, but in simple javascript is there a way to "type" into a textbox? Or, modify what's typed? I tried using macros but it doesn't fill out the form after refresh.
Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hi All, Im new to javascript (new to programming in general!) and I have a date script and a time script that I want to run and placed into a form. The form will be listed as: Date: 21/10/2014 Time: 03:20:00 PM I have the scripts and they are working.. only when I put them both in the same page, only one will work. Date Script: function my_curr_date() { var currentDate = new Date() var day = currentDate.getDate(); var month = currentDate.getMonth() + 1; var year = currentDate.getFullYear(); var my_date = day+"-"+month+"-"+year; document.getElementById("dateField").value=my_date; } <body onload='return my_curr_date();'> Time Script: function DisplayTime(){ if (!document.all && !document.getElementById) return timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2 var CurrentDate=new Date() var hours=CurrentDate.getHours() var minutes=CurrentDate.getMinutes() var seconds=CurrentDate.getSeconds() var DayNight="PM" if (hours<12) DayNight="AM"; if (hours>12) hours=hours-12; if (hours==0) hours=12; if (minutes<=9) minutes="0"+minutes; if (seconds<=9) seconds="0"+seconds; var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight; timeElement.innerHTML="<font style='font-family:verdana, arial,tahoma;font- size:12px;color:#E25984; font-weight:bold;'>"+currentTime+"</b>" setTimeout("DisplayTime()",1000) } window.onload=DisplayTime ____________________________________ Separately, they both work perfectly. But together, only one will display. Any help is appreciated! Thanks, Jess Does anyone know of a good library/function that will add the commas to a number automatically as the number is entered into a field?
it is required to locate the typing cursor in field after when click ok on java alert thanks in advance !! i'm using a JavaScript typing tutorial....here is my code [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> [CODE] 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> [CODE] Can any one help me to input the speed, accuracy and count to a database. I can't able to take the value because its JavaScript.... Hello guys I've made javascript tutorial for those who want to learn more here's the tutorial on my front page : http://www.youtube.com/user/morplug or direct link : http://www.youtube.com/watch?v=MikXCLWkSPs I'll be happy to continue making more tutorials , To show me you want more please Like the video and subscribe if you want! regards , Mor. Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! Greetz, I am new to JS and using code that someone gave me. I have cleaned up the code, made it standard compliant and tailored it to my need. The code is for an ultra basic picture gallery. The code is almost perfect, but there is one undesirable effect in which when an image is selected from the thumbnail gallery, the thumbnail dissapears as I am guessing its the same element, just blown up. What I would like to know is how I can stop it from happening? I will post the full output of the HTML file. I have also uploaded zip file which contains the HTML file and two images, so one may see the compiled page as I do. Zip file (Note: STUPID hosting site placed the DOWNLOAD button right under "MP3 ringtones"... Clicking download will not take you to some premium SMS service or anything like that): http://qfs.mobi/f31666 Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<TITLE></TITLE>
<META content="charset=windows-1252;text/html" http-equiv="content-type">
<SCRIPT type="text/javascript">
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("click", "");
}
this.className+=" click";
}
}
}
</SCRIPT>
<STYLE type="text/css">
#gallery ul {
float:right;
overflow:auto
}
#gallery ul li {
display:inline;
width:50px;
height:50px;
float:left;
margin:0 4px 4px 0;
border:1px solid #444;
cursor:pointer
}
#gallery ul li img {
display:block;
height:50px
}
#gallery ul li span {
display:none;
position:absolute;
left:447px;
top:235px;
font-family:verdana;
color:#06a
}
#gallery ul li.click {
border-color:#fc0;
cursor:default
}
#gallery ul li.click i {
position:absolute;
left:0;
width:545px
}
#gallery ul li.click i img {
margin:5px auto 0 auto;
height:auto
}
#gallery ul li.click span {
display:block
}
</STYLE>
<BODY onload="clickMenu('gallery')">
<DIV id="gallery">
<UL>
<LI><I><IMG src="1.png" title="" alt=""></I><SPAN>Front</SPAN></LI>
<LI><I><IMG src="2.png" title="" alt=""></I><SPAN>Back</SPAN></LI>
</UL>
</DIV>
</BODY>
Much appreciated! Hi Script Experts I am facing issue in below code for Brisilia time zone.(GMT-3). Issue comes in October month only. It is going tobig loop. I am not getting how Date object is behaving here. Thanks in advance Pranav Sharma *********************************** <script type="text/javascript"> var nDate; var nCurrentYear = 2011; var nCurrentMonth = 10; nYear=2011; nMonth=10; var date = new Date(nYear, nMonth-1, 1); document.write('Month:'+date.getMonth() +':CurrentMonth:'+nCurrentMonth); while (date.getMonth() == nCurrentMonth-1) { nDate = date.getDate(); document.write(date.toDateString()); date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1); } </script> ********************************** Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. |
|||||||