JavaScript - How Can I Keep The Date Updated On This Form, Using Javascript?
I have created a journey planner from www.transportdirect.com (it automatically creates the code, so you just copy and paste it into your websites HTML code). But it doesn't automatically update the date parts of the form, to match the current date. This is the code for the date part of the form:
<td> <p style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; text-align: left; margin: 5px 5px 5px 5px;"> <select id="dtd" name="dtd" style="border-right: lightgrey 1px solid; border-top: lightgrey 1px solid; font-size: 12px; border-left: lightgrey 1px solid; border-bottom: lightgrey 1px solid; font-family: verdana, arial, helvetica, sans-serif; background-color: white; height: 18px;"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <!-- !IMPORTANT! Month/year dropdown values will need to be maintained over time. Only the current month and the following two months should be selectable because complete public transport data is only available for journeys up to three months in the future. Client-side script should be added to default the dropdown values to the current date and time. --> <select id="dtm" name="dtm" style="border-right: lightgrey 1px solid; border-top: lightgrey 1px solid; font-size: 12px; border-left: lightgrey 1px solid; border-bottom: lightgrey 1px solid; font-family: verdana, arial, helvetica, sans-serif; background-color: white; height: 18px;"> <option selected="selected" value="032012">Mar 2012</option><option value="042012">Apr 2012</option><option value="052012">May 2012</option> </select></p> </td> What I want to do is add a javascript code to automatically keep the dates updated? If you need any further details, please ask. Thank you for any help. Similar TutorialsHi, I'm having a bit of trouble with this here... Before I submit the form with JS I update an input field with js like this: Code: Code: document.getElementById('IC_Checksum').value = data; imaginaryform.submit(); The problem is that the updated value is not sent along with the post data. Instead the old value is sent along. When i submit the form with a button afterwards though (not auto submit after the value is set), then the value is sent along fine. But that's not how I want it to work... Can anyone tell me how I can send the value that I'm setting with JS along with the post data like this? Not sure if this is possible in javascript: I'm looking for two different dates (bill date and due date) on an invoice that are captured by OCR. If one of them exists, but the other does not, I want the empty field to be 14 days before (or after) the other. For example: if the bill date is 7/27/2010 and the due date was not captured, I want to set the due date as 8/10/2010 (14 days after the bill date). If the due date was captured as 8/10/2010, but the due date is blank, I want to assign the bill date as 7/27/2010 (14 days before the due date). if both dates have values, do nothing. Thanks. Hi folks, i am trying to generate a dynamic datefield with date mask "mm/dd/yyyy" and trying to insert it into Oracle db ...i still got the error ORA invalid month ehich means the date filed is not recognized as date: below is what i am doing : newStartDate = document.createElement( 'INPUT' ); newStartDate.setAttribute('type','Date'); newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; any help thanks ?? Also i want to add a datepicke to this textbox..how it is posible / other option is to use Jquery datepicker but could not know how to impement it thanks again how can I get 1 tenth of a second for my clock? (bad typo for clock. I had to edit it. I'm saying that for the admin because I know you're not suppose to edit excessively)
I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?
Ok, i have a javascript that creates a table then appends it to an empty div. This works fine in FF, however it fails to work in IE8. [edit] I have decided to post the entire code since I wasn't having any luck getting any suggestions. Maybe now someone can help me out. Code: function createTable() { var machine = document.Catalog.machine.value; var dSearch = document.Catalog.dSearch.value; var section = document.Catalog.section.value; var x = xmlDoc.getElementsByTagName('record'); var y = xmlDoc.getElementsByTagName('data'); var newEl = document.createElement('TABLE'); newEl.className = 'resultsTab'; var tmp = document.createElement('TBODY'); newEl.appendChild(tmp); var row = document.createElement('TR'); var n = 1; var headings = new Array("Col1", "Col2", "Col3", "Col4", "Col5"); var dcount = 0; //for (t=0;t<10;t++) { for (t=0;t<y[0].childNodes.length;t++) { if (y[0].childNodes[t].tagName == "record") { // it is required for FF to work properly dcount++; } } if (document.Catalog.thumbImg[0].checked) { var container = document.createElement('TH'); var theData = document.createTextNode("Pic"); container.className = "topline1"; container.appendChild(theData); row.appendChild(container); } for (h=0;h<headings.length;h++) { var container = document.createElement('TH'); var theData = document.createTextNode(headings[h]); container.className = 'topline' + n; container.appendChild(theData); row.appendChild(container); n++; } tmp.appendChild(row); switch (searchtype) { case 1: var objRegex = new RegExp(machine); break; case 2: var objRegex = new RegExp(section, "i"); break; case 3: var objRegex = new RegExp(dSearch, "i"); break; default: document.getElementById("replaceTxt").innerHTML = "<p>There was an error processing your request.</p>"; } var rowColor = 1; var noResult = "false"; for (i=0;i<dcount;i++) { var row = document.createElement('TR'); var searcharr = new Array(); for (j=0;j<x[i].childNodes.length;j++) { if (x[i].childNodes[j].nodeType != 1) continue; searcharr.push(x[i].childNodes[j].firstChild.nodeValue); } var searchstrg = searcharr.toString(); if (searchstrg.match(objRegex)) { var t; var m=1; if (document.Catalog.thumbImg[0].checked) { var pn = "images/"+searcharr[2]+".jpg"; var container = document.createElement('TD'); var refLink = document.createElement("A"); refLink.setAttribute('href', "javascript:viewImg(\""+pn+"\")"); var imgHolder = document.createElement("IMG"); imgHolder.setAttribute("src", pn); imgHolder.style.height = "75px"; refLink.appendChild(imgHolder); container.appendChild(refLink); container.className = "img"+rowColor; row.appendChild(container); } for (t=0; t<searcharr.length; t++) { container = document.createElement('TD'); var theData = document.createTextNode(searcharr[t]); container.appendChild(theData); container.className = 'line' + rowColor + '_' + m; row.appendChild(container); m++; } tmp.appendChild(row); rowColor == 1 ? rowColor++ : rowColor--; document.getElementById("replaceTxt").innerHTML = ""; document.getElementById("replaceTxt").appendChild(newEl); noResult = "true"; } } if (noResult=="false") { document.getElementById("replaceTxt").innerHTML = "<h3>Sorry, there was no match to your search. Please try again</h3>"; } } xmlDoc is the xml object from my import xml function. it is working correctly. IE does not give any JS errors, it just does nothing. If I put text in the Code: document.getElementById("replaceTxt").innerHTML field, IE displays the text in the correct spot so I know the code is working. I also verified the data is being written correctly to "newEl" via IE 8 debugger. IE just does not want to append the newEl child to the <div> tag. This is where I assume the problem is. In my JSP page i have start date and End date fields are there. The format for these two fields has Date and Time . But my requirement is if i change the date in start date field it should change the same date in End Date field also automatically. Here is my code Code: <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;"> <%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() ) %> <select name="startHour" id=startHour class="selInputSmall" onChange="odRefreshApptEndTime();"> <%= OptionMenu.render( _ahsPage, "CAL_TIME_HOUR", appt.getStartTime().substring(0,2), false, true ) %> </select> <select name="startMin" id=startMin class="selInputSmall" onChange="odRefreshApptEndTime();"> <%=OptionMenu.render( _ahsPage, "CAL_TIME_MINUTE", appt.getStartTime().substring(3,5), false )%> </select> </div> <div class="formPrompt" style="position: absolute; width: 90; height: 22; left: 20; top: 2; text-align: left;"><%=_pCal.get("end_time")%>:</div> <div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;"> <%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() )%> <div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div> </div> Please give me an idea on this one ? How do i change the End Date automatically when i change the start date. Hello. I have got this kind of array: Code: $days = array('Monday' => '2012-03-19', 'Tuesday' => '2012-03-20' ); I'm iterating like this: Code: foreach($days as $key => $value){ echo '<a href="javascipt:confirmDelete('.$value.');">Delete</a>'; } Script: Code: function confirmDelete(day) { if (confirm('Delete?')) { window.location.href = 'processDay.php?action=delete&day=' + day ; } } While i hover over the link with coursor, it show it good: javascript:confirmDelete(2012-03-19), but when I submit the delete confirmation, i get &day=1987. Where is the problem? Hi, My JS Date validation was failing for a date which as per business is a valid date (01/01/0001) - MM/DD/YYYY It seems that the constructor for Date object is doing something funny.. var dayobj = new Date(yearfield, monthfield-1, dayfield) wasn't working for this case whereas teh one mentioned below seems to be working fine : var dayobj = new Date() dayobj.setFullYear(yearfield,monthfield-1,dayfield) What's the trick here ?? hello i have this code: Code: Code: function buildMonthlyEntries() { var startDate = new Date(document.getElementById('startDate').value); var endDate = new Date(document.getElementById('endDate').value); if(startDate == "Invalid Date" || endDate == "Invalid Date") { return null; } var entryCount = endDate.getMonth() - startDate.getMonth(); var monthlyEntries = document.getElementById('monthlyEntries'); monthlyEntries.innerHTML = ""; for(var i = 0; i < entryCount; i++) { var textElement = document.createElement('input'); textElement.setAttribute('type', 'text'); textElement.setAttribute('id', 'entry' + i); monthlyEntries.appendChild(textElement); } return null; } <div id="dateRange"> <input type="text" id="startDate"> <input type="text" id="endDate"> </div> <div id="monthlyEntries"></div> <INPUT TYPE="button" NAME="button" Value="Click" onClick="buildMonthlyEntries()"> It calculates the number of months between the 2 dates and generates the number of input filds equal to the number of months. The only problem is when i change the year. For example if i have start date 2012-03-22 and enddate 2013-04-22, instead of generating 13 input fields it only generates 1 field, because it only substracts months. How can i make this script also calculate corectly months even if year is changed? Thanks I cannot get my JavaScript code to work. Does anyone know what I am doing wrong with the following code: <html> <head> <title>Welcome</title> </head> <body> <h1>Welcome to my Web Page</h1> <script type="text/javascript"> /* <![CDATA[ */ var dateObject = new Date(); var greeting = ""; var curTime = ""; var minuteValue = dateObject.getMinutes(); var hourValue = dateObject.getHours(); if (minuteValue < 10) minuteValue = "0" + minuteValue; if(hourValue < 12) { greeting = "<p>Good morning! " curTime = hourValue + ":" + minuteValue + " AM"; } else if (hourValue == 12) { greeting = "<p>Good afternoon! "; + minute Value + " PM"; } else if (hourValue == 17) { greeting = "<p>Good afternoon!" cutTime = (hourValue-12) + ":" + minuteValue + " PM" } else { greeting = "<p>Good evening! " curTime = (hourValue-12) + ":" + minuteValue + " PM" } var dayArray = newArray("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); var monthArray = newArray("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var day = dateObject.getDay(); var month = dateObject.getMonth(); document.write("<p>"+ greeting + "It is " + curTime + " on " + dayArray[day] + ", " + monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear() + ".</p>"); /* ]]> */ </script> </body> </html> ~xhtml205 I hope someone out there can help me! I am a librarian and am looking for a way to get javascript to display a simple future date for books we need to pull off our shelf. The date needs to be 6 days into the future. I want the date to display as either a hyphenated number: ie. 8-13 (for August 13th) or as an abbreviation of the month with the future date: ie. Aug. 13 I've tried this a number of ways, but I am just not getting the simple date format that I want. I need the script to automatically account for number of days in the month, etc. and adjust accordingly. For instance, if it was July 31st, I would want the script to display Aug. 6 or 8-6. I am not well-versed when it comes to javascript (read ignorant), but I posted below what I have managed to cobble together after searching online and playing with the ww3 school's "TryitEditor". Thanks for any help or tips in advance! Script below displays: PULL DATE: 6 days, on Saturday, August 13, 2011 Thanks! but I want it to display: PULL DATE: 6 days, on Aug. 13 or 6 days, on 8-13 Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-GB"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HOLD pull date</title> </head> <body> <form name="myFormName" method="get" action=" "> <h1>PULL DATE:</h1> <noscript><div>Javascript must be enabled in your browser</div></noscript> <script type="text/javascript"> var myDelayInDays=6; var myDate=new Date(); var oneDayInMilliseconds = (24*60*60*1000); var myTimeInMillisconds=myDate.getTime()+(myDelayInDays * oneDayInMilliseconds); myDate.setTime(myTimeInMillisconds); /* setTime() is an 'inbuilt' javascript function that calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970 it can be buggy in some browsers */ var widgetDueDate = myDate.toLocaleDateString(); /* toLocaleDateString() is an 'inbuilt' javascript function that converts a Date object, according to local time, to a string and returns the date portion */ document.write('<p>' + myDelayInDays + ' days, on <strong>' + widgetDueDate + '<\/strong><\/p>'); </script> </form> <p>Thanks!</p> </body> </html> Hi All, I have a snippet of Javascript that changes date format from yyyy/mm/dd to dd/mm/yyyy: Code: <script type="text/javascript"> var myString = "[[date]]"; var mySplitResult = myString.split("-");document.write(mySplitResult[2] + "/" + mySplitResult[1] + "/" + mySplitResult[0] ); </script> However, I want it to return the format as dd/mm/yy (the last two number of the year rather than the full four). Is this possible to do? Thanks, Neil I have a website with all of the months of the year. The main page of the website is suppose to be the current month. How can make my index page load automatically to the correct month. So if it is April, my index page will automatically load april.html. Thank you so much! I am trying to use JavaScript in conjuntion with html to display a table of sortable cities, states and dates. The dates are my problem. I am a novice and was given this code. But it seems to sort in European style, yyyy/mm/dd. I need it to sort mm/dd/yyy, which i am told is US style. Any help on this, I would be most grateful for. I have placed a page here to let you see the code at work. This page has the code on it in text also. I do not mind posting the code hgere also if you prefer. Thanks for any help you may be willing to offer me with this. Preston Hi guys. I'm trying to make a small bit of scripting that will show the current time, updating once every second. What I need is the following: 1. Multiple timezones or GMT offsets (just put me on the right path, I can code them in, 2. Daylight savings time taken into consideration (only for Australia), adding the 1 hour during the times it is needed, 3. Text to show "Open" and "Closed" during different times (open during 8am to 5pm and closed if not 8am to 5pm.) I have the following code as a start, but I am completely stuck with how to get the rest of what I need! Any help would be appreciated. <h4>Victoria <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } document.write(hours + ":" + minutes + " ") if(hours > 11){ document.write("PM") } else { document.write("AM") } //--> </script> <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } if(hours > 11){ document.write("True") } else { document.write("False") } //--> </script> </h4> Cheers in advance. Dale. I have a javascript that should convert any date into a number between 1 and 260. Based on the outcome of that calculation, a viewer is directed to a specific web page. How can I verify the calculation? How can I see what number javascript is arriving at so I can backtrack to the error? It is not serving up the correct page. I have compared the results to a calculator on another website that uses a different script to calculate the same result -- that's why I am saying the end results are not correct. On the other website, scroll down to where you enter a date. It returns a name just above the date (example: July 25, 1970 returns Electric Star). The script I included above returns Yellow Sun. July 25, 1970 should = 68. Code: function calculate() { if(!isValidDate()) return; var result = 0; var cuttingAge = 260; var yearBox = document.getElementById("year"); var year = yearBox.value; var month = document.getElementById("month").value; var day = document.getElementById("day").value; //Rule # 1 if(month==1 || month==2){ var selectedYearIndex; for(var i=0; i<yearBox.options.length; i++){ if(yearBox.options[i].selected){ selectedYearIndex = i; break; } } year = yearBox.options[selectedYearIndex-1].value; } //Rule # 2 var monthLength = new Array(); monthLength[0]=0; monthLength[1]=31; monthLength[2]=29; monthLength[3]=31; monthLength[4]=30; monthLength[5]=31; monthLength[6]=30; monthLength[7]=31; monthLength[8]=31; monthLength[9]=30; monthLength[10]=31; monthLength[11]=30; monthLength[12]=31; monthLength[13]=31; monthLength[14]=29; var dayPassed = 0; var tempMonth = month; if(month<3) //If its january or february tempMonth = parseInt(tempMonth) +12; //Add previous year's days for(var i=3; i<tempMonth; i++){ dayPassed += monthLength[i]; } dayPassed += parseInt(day) -1; dayPassed = dayPassed%cuttingAge; //Rule # 3 result = parseInt(year) + parseInt(dayPassed); //Rule # 4 if(result > cuttingAge) result -= cuttingAge; //Rule # 5 var pendant = new Array(); var abc = new Array(); pendant[0] = { name:"imix", values:new Array(1, 21, 41, 61, 81, 101, 121, 141, 161, 181, 201, 221, 241) }; pendant[1] = { name:"ik", values:new Array(2, 22, 42, 62, 82, 102, 122, 142, 162, 182, 202, 222, 242) }; pendant[2] = { name:"akbal", values:new Array(3, 23, 43, 63, 83, 103, 123, 143, 163, 183, 203, 223, 243) }; pendant[3] = { name:"kan", values:new Array(4, 24, 44, 64, 84, 104, 124, 144, 164, 184, 204, 224, 244) }; pendant[4] = { name:"chicchan", values:new Array(5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245) }; pendant[5] = { name:"cimi", values:new Array(6, 26, 46, 66, 86, 106, 126, 146, 166, 186, 206, 226, 246) }; pendant[6] = { name:"manik", values:new Array(7, 27, 47, 67, 87, 107, 127, 147, 167, 187, 207, 227, 247) }; pendant[7] = { name:"lamat", values:new Array(8, 28, 48, 68, 88, 108, 128, 148, 168, 188, 208, 228, 248) }; pendant[8] = { name:"muluk", values:new Array(9, 29, 49, 69, 89, 109, 129, 149, 169, 189, 209, 229, 249) }; pendant[9] = { name:"oc", values:new Array(10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250) }; pendant[10] = { name:"chuen", values:new Array(11, 31, 51, 71, 91, 111, 131, 151, 171, 191, 211, 231, 251) }; pendant[11] = { name:"eb", values:new Array(12, 32, 52, 72, 92, 112, 132, 152, 172, 192, 212, 232, 252) }; pendant[12] = { name:"ben", values:new Array(13, 33, 53, 73, 93, 113, 133, 153, 173, 193, 213, 233, 253) }; pendant[13] = { name:"ix", values:new Array(14, 34, 54, 74, 94, 114, 134, 154, 174, 194, 214, 234, 254) }; pendant[14] = { name:"men", values:new Array(15, 35, 55, 75, 95, 115, 135, 155, 175, 195, 215, 235, 255) }; pendant[15] = { name:"cib", values:new Array(16, 36, 56, 76, 96, 116, 136, 156, 176, 196, 216, 236, 256) }; pendant[16] = { name:"caban", values:new Array(17, 37, 57, 77, 97, 117, 137, 157, 177, 197, 217, 237, 257) }; pendant[17] = { name:"etznab", values:new Array(18, 38, 58, 78, 98, 118, 138, 158, 178, 198, 218, 238, 258) }; pendant[18] = { name:"cauac", values:new Array(19, 39, 59, 79, 99, 119, 139, 159, 179, 199, 219, 239, 259) }; pendant[19] = { name:"ahau", values:new Array(20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260) }; var redirecctPages = new Array(); redirecctPages["chuen"] = "http://store.mayankin.com/blue-monkey/"; redirecctPages["eb"] = "http://store.mayankin.com/yellow-human/"; redirecctPages["ben"] = "http://store.mayankin.com/red-skywalker/"; redirecctPages["ix"] = "http://store.mayankin.com/white-wizard/"; redirecctPages["men"] = "http://store.mayankin.com/blue-eagle/"; redirecctPages["cib"] = "http://store.mayankin.com/yellow-warrior/"; redirecctPages["caban"] = "http://store.mayankin.com/red-earth/"; redirecctPages["etznab"] = "http://store.mayankin.com/white-mirror/"; redirecctPages["cauac"] = "http://store.mayankin.com/blue-storm/"; redirecctPages["ahau"] = "http://store.mayankin.com/yellow-sun/"; redirecctPages["imix"] = "http://store.mayankin.com/red-dragon/"; redirecctPages["ik"] = "http://store.mayankin.com/white-wind/"; redirecctPages["akbal"] = "http://store.mayankin.com/blue-night/"; redirecctPages["kan"] = "http://store.mayankin.com/yellow-seed/"; redirecctPages["chicchan"] = "http://store.mayankin.com/red-serpent/"; redirecctPages["cimi"] = "http://store.mayankin.com/white-world-bridger/"; redirecctPages["manik"] = "http://store.mayankin.com/blue-hand/"; redirecctPages["lamat"] = "http://store.mayankin.com/yellow-star/"; redirecctPages["muluk"] = "http://store.mayankin.com/red-moon/"; redirecctPages["oc"] = "http://store.mayankin.com/white-dog/"; var pendantName; for(var i =0; i<pendant.length; i++){ var found = false; for(var j=0; j<pendant[i].values.length; j++){ if(result == pendant[i].values[j]){ pendantName = pendant[i].name; found = true; break; } } if(found) break; } document.location = redirecctPages[pendantName]; } /** * Comment */ function isValidDate() { var year = document.getElementById("year").value; var month = document.getElementById("month").value; var day = document.getElementById("day").value; if(month==2 && day>29){ alert("Please select a valid date"); return false } if((month==4 || month==6 || month==9 || month==11) && day>30){ alert("Please select a valid date"); return false } return true; } Problem with the Date when one date variable rolls back to a previous month. Everything is explained he http://kcmaindomain.com/fix-js.html View Page Source of that page to see the java script code. I would greatly appreciate the help as I am fairly amateur coder and I have no idea how to correct this myself. |