|
JavaScript - How To Fill Automatically Fill Quarter End Date In Calendar In Javascript
Hey
I got two text boxes one for start date and second for end date in that i want to fill text boxes according to Quarter of a year, as like if i put 1-4-2012 in first text box then in second text box values should be automatically 30-6-2012. So now tell me please how to do this ??????? Regards rajboy13 Contact me @ = rajboy13@gmail.com Similar Tutorialshi all, i have the following form: Code: <form id="form1" name="form1" method="post" action="results.php">
<table width="680" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td colspan="5"><strong>How much would you pay for X? </strong></td>
</tr>
<tr>
<td width="100"><div align="center">$1</div></td>
<td width="125"><div align="center"><span class="style13">
<input name="p1" type="radio" value="yes" />
</span></div></td>
<td width="125"><div align="center">Yes</div></td>
<td width="125"><div align="center"><span class="style13">
<input name="p1" type="radio" value="no" />
</span></div></td>
<td width="125"><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$2</div></td>
<td><div align="center"><span class="style13">
<input name="p2" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p2" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$3</div></td>
<td><div align="center"><span class="style13">
<input name="p3" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p3" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$4</div></td>
<td><div align="center"><span class="style13">
<input name="p4" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p4" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
<tr>
<td><div align="center">$5</div></td>
<td><div align="center"><span class="style13">
<input name="p5" type="radio" value="yes" />
</span></div></td>
<td><div align="center">Yes</div></td>
<td><div align="center"><span class="style13">
<input name="p5" type="radio" value="no" />
</span></div></td>
<td><div align="center">No</div></td>
</tr>
</table> </form>
sorry for the lengthy code because of the table. what i want to do is, if the user clicks No for for any input (p1 through p5), then I want all the other inputs below to automatically fill in with No as well. Similarly, if the user clicks Yes for any answer, I want all the inputs above that answer to fill in with Yes. i think those are the only two rules i would have to program to ensure that the user provides consistent answers. i'd also like to know how, if input 1 is a set of radio buttons, and one of them is selected, you can use that result to fill in input 2 in a certain way. thanks What I am looking to do is auto-populate a number of forms based on what a user chooses as a starting date. For example: If a user enters 12/12/2009 I want the other fields to automatically populate with the next 2 weeks (12/13/2009, 12/14/2009, 12/15/2009 etc.) Anyone have a useful script that I can use given that these fields are formatted as dates? The idea is to save time by only having to fill in the first date in the timesheet. I am trying to create a sample form using javascript. The form has a series of option and a submit button followed by a textarea. When the user clicks the submit button the textarea should be filled with the selected information from the form. I cannot get the textarea to fill with text. I believe the problem lies in the fact that when I submit the form the page refreshes, but I am not sure if that's the case. With this version of the code I actually can't get passed the Room Type. It always says No Room Type selected. Here is my code: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Sample</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function checkForm(myForm)
{
regexp = /^\d\d\/\d\d\/\d{4}$/;
numReg = /^\d*$/;
str = "";
for (i = 0; i < 5; i++)
{
if (!myForm.roomType[i].checked)
{
alert("No Room Type Selected!\nPlease Select Room Type!");
return;
}
str += "Room Type: ";
str += myForm.roomType[i].value + "\n"
}
str += "Activities: \n";
for (i = 0; i < 4; i++)
{
if (!myForm.activity[i].checked)
{
alert("No Activities Selected!\n Please Select Activities!");
return;
}
str += "\t" + myForm.activity[i].value + "\n";
}
if (myForm.hotels.selectedIndex+1 < 1)
{
alert("No Hotel Selected!\n Please Select a Hotel!");
return;
}
else
{
str += "Hotel: ";
for (var i = 0; i < myForm.hotels.length; i++)
{
if (myForm.hotels[i].selected)
{
str += myForm.hotels[i].value + "\n";
}
}
}
if ( myForm.confname.value == "" || myForm.confname.value == null)
{
alert("No Conference Name Entered! Please Enter a Conference Name!");
return;
}
else
{
str += "Conference Name: " + myForm.confname.value + "\n";
}
if (!regexp.test(myForm.date.value))
{
alert("Invalid Date");
return;
}
else
{
str += "Date: " + myForm.date.value + "\n";
}
if (!numReg.test(myForm.zip.value))
{
alert("Invalid Zip Code");
return;
}
else
{
str += "Zip Code: " + myForm.zip,value + "\n";
}
myForm.info.value = str;
}
</script>
</head>
<body>
<h1>Host your Conference!</h1>
<form name="conference" method="post" onsubmit="checkForm(this); return false;" action="#">
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Room Type Type:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="radio" name="roomType" value="Large Meeting Room" />Large Meeting Room<br />
<input type="radio" name="roomType" value="Small Meeting Room" />Small Meeting Room<br />
<input type="radio" name="roomType" value="Video Conference Room" />Video Conference Room<br />
<input type="radio" name="roomType" value="Theater Lecture Hall" />Theatre Lecture Hall<br />
<input type="radio" name="roomType" value="Convention Center" />Convention Center<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Activities:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="checkbox" name="activity" value="Swimming" />Swimming<br />
<input type="checkbox" name="activity" value="lecture" />Lecture<br />
<input type="checkbox" name="activity" value="Golf" />Golf (Gentlemen Only Ladies Forbidden)<br />
<input type="checkbox" name="activity" value="Tour of the Facilities" />Tour of the Facilities<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Hotel:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<select name="hotels" size="4">
<option name="marriott" value="Marriot">Marriott</option>
<option name="doubleTree" value="Double Tree">Double Tree</option>
<option name="comfortSuites" value="Comfort Suites">Comfort Suites</option>
<option name="sheraton" value="Sheraton">Sheraton</option>
</select>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Confence Name:
<input type="text" name="confname" size="60" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Zip Code:
<input type="text" name="zip" size="12" value="Enter Zip Code"/>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Date:
<input type="text" name="date" size="10" value="mm/dd/yyyy" />
</div>
<br />
<div>
<input name="confSubmit" type="submit" style="background:#CCCCCC !important; color:#333333 !important;"
value="It's Conference Time!" />
<input name="confReset" type="reset" style="background:#CCCCCC !important; color:#333333 !important;"
value="Reset Form" onclick="javascript:return checkForm(this.form);" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Print This:
<textarea type="text" name="info" size="1200" style="vertical-align:text-top; height:175px; width:325px;">
</textarea>
</div>
</form>
</body>
</html>
And here is a link to the page: Form Sample Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. Hello everyone, I am creating a small application for my memory book. I want to have one of those calendars like in Here .. that would retutn values like: day month year - seperatelly that I could use in php. Im looking for easy solution if there is one.. Simple and short script Kind regards, Aurimas Hello now i found better way how to show it to you people. I finished one teail of this workd . Now the most important thing i need to do is > 1. Check this http://zr-gaming.ucoz.com/index/ban_lista/0-5 2. In place "Nick Igraca" __________ . When i type there something , that text shoudl go automaticly in table oben Example When i write "OMG" it should fill "OMG" Under "Nick Igraca" There you see Pred@t0R is allredy filled in , but i do it alone in codes . So i want when i fill the text and press submit it should go to real place automaticly , so it should be filled in . How can i do it ? I hear i need some script or something . I will give you Reward and Reputation points for help , its inportant for me , i need to finish it for 24 hours . Thank you very much guys . If you dont understand something just tell me . And very thanks to you who will try to help me . Hi, I want to create a javascript: url that will automatically enter a few pieces of information into a registration form provided by a 3rd party. Basically I just want to help users navigate the form a little quicker, and the form doesn't accept query strings. I am running into the fact that when the page is loaded, the cache is flushed. So, I have 2 working javascript: URLs, and I want to combine them into a bookmarklet (and then make it a tinyurl). Can I do that? Thanks, Chris javascript: top.location.href='http://www.google.com/'; javascript: document.f.q.value='This works too'; Does anyone know how I can modify the code below to show a question that has more then one fill in the blank? For example: _____ is an attitude or behavior which leads another to do ________. Thank you. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var question_type=new Array(4)
question_type[0]="mult";
question_type[1]="mult";
question_type[2]="blank";
question_type[3]="blank";
var questions=new Array(4)
questions[0]="The words used to <u>describe</u> the manifestation of Jesus as Messiah of Israel, Son of God and Savior of the world are ...";
questions[1]="Which of these is not a symbol of the Holy Spirit?";
questions[2]="Human life must be respected and protected absolutely from the moment of ______.";
questions[3]="_____ is an attitude or behavior which leads another to do evil.";
var answers = new Array(4)
answers[0]= "B"; //The Epiphany
answers[1]= "C"; //Sunshine [water, fire, anointing]
answers[2]="conception";
answers[3]="scandal";
var each_question = new Array(3)
each_question[0]="<table width='98%' border='0'>" + "<tr>" + "<td colspan='2'>" + "<font face='Arial, Helvetica, sans-serif'>"
+ questions[0] + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%'>" + " " + "</td>" + "<td>" + " " + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='A'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "The creed" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='B'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "The Epiphany" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='C'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "The magisterium" + "</font>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='D'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "The Annunciation" + "</font>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + " " + "</td>" + "<td>" + "<img src='line_animation.gif' width='160' height='14' align='right'>" + "</td>" + "</tr>" + "</table>" + "</font>";
each_question[1]="<table width='98%' border='0'>" + "<tr>" + "<td colspan='2'>" + "<font face='Arial, Helvetica, sans-serif'>"
+ questions[1] + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%'>" + " " + "</td>" + "<td>" + " " + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='A'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "Water" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='B'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "Fire" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='C'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "Sunshine" + "</font>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='radio' name='choice' value='D'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "Anointing" + "</font>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + " " + "</td>" + "<td>" + "<img src='line_animation.gif' width='160' height='14' align='right'>" + "</td>" + "</tr>" + "</table>" + "</font>";
each_question[2] = "<table width='98%' border='0'>" + "<tr>" + "<td colspan='2'>" + "<font face='Arial, Helvetica, sans-serif'>"
+ questions[2] + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%'>" + " " + "</td>" + "<td>" + " " + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='text' name='text_field'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + " " + "</td>" + "<td>" + "<img src='line_animation.gif' width='160' height='14' align='right'>" + "</td>" + "</tr>" + "</table>" + "</font>";
each_question[3] = "<table width='98%' border='0'>" + "<tr>" + "<td colspan='2'>" + "<font face='Arial, Helvetica, sans-serif'>"
+ questions[3] + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%'>" + " " + "</td>" + "<td>" + " " + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + "<input type='text' name='text_field'>" + "</td>" + "<td>" + "<font face='Arial, Helvetica, sans-serif'>" + "</font>" + "</td>" + "</tr>" +
"<tr>" + "<td width='28%' align='right'>" + " " + "</td>" + "<td>" + "<img src='line_animation.gif' width='160' height='14' align='right'>" + "</td>" + "</tr>" + "</table>" + "</font>";
var currentQuestion=0;
var score=0;
function writeEachQuestion() {
if(currentQuestion==0){
top.bottom_right.document.open();
top.bottom_right.document.write("<center>" + "<h3>" + "<font face='arial, helvetica, verdana'>" + "Go get 'em," + " " + userName + "!" + "<br>" + "</h3>" +
"Let's see how well" + "<br>" + "you know your faith!" + "</center>" + "</font>");
top.bottom_left.document.write(each_question[currentQuestion]);
} else {
top.bottom_left.document.write(each_question[currentQuestion]);
top.bottom_right.document.open();
}
}
function swapper() {
top.bottom_left.document.fish_first.src="next2.gif";
}
function unswapper() {
top.bottom_left.document.fish_first.src="next.gif";
}
function checkQuestionType() {
if (question_type[currentQuestion-1]=="mult"){
multChecker();
} else if (question_type[currentQuestion-1]=="blank") {
textChecker();
}
}
function multChecker() {
var answerValue=answers[currentQuestion-1];
var checkedIndex = -1;
for(i=0; i < top.bottom_left.document.quiz_questions.choice.length; i++) {
//if a radio button is checked, the variable checkedIndex is set to the value of that index number.
if(top.bottom_left.document.quiz_questions.choice[i].checked){
checkedIndex = i;
selected_answer = top.bottom_left.document.quiz_questions[checkedIndex].value;
}
}
if (selected_answer==answerValue) {
score++;
//The angelTableCorrect() function runs(see below).
angelTableCorrect();
//An alert pops up if nothing's checked, with a string telling the user to guess next time.
} else if (checkedIndex==-1){
alert("Next time," + " " + userName + "," + " " + "take a guess!");
//Because I'm heartless, the user isn't given a second chance. If not guess was made, angelTableWrong() executes (see below).
angelTableWrong();
} else {
angelTableWrong();
}
}
function textChecker() {
var answerValue=answers[currentQuestion-1];
//theWord represents the user's input.
var theWord = top.bottom_left.document.quiz_questions.text_field.value;
theWordLower=theWord.toLowerCase();
if(theWordLower==answerValue) {
score++;
angelTableCorrect();
} else if (theWord!=answerValue) {
angelTableWrong();
}
}
function angelTableCorrect () {
top.top_right.document.open();
top.top_right.document.write("<table align='left'>" +
"<tr>" + "<td align='center'>" + "<font face='Arial'>" + "Right," + " " +
userName + "!" + "<br>" + "You're" + " " + score + " " + "out of" + " " + currentQuestion +
"</td>" + "<td>" + "<img src='angel_correct.gif'>" + "</td>" +
"</tr>" + "</table>");
}
function angelTableWrong () {
top.top_right.document.open();
top.top_right.document.write("<table align='left'>" +
"<tr>" + "<td align='center'>" + "<font face='Arial'>" + "Wrong," + " " + userName + "." + "<br>" +
"You're" + " " + score + " " + "out of" + " " + currentQuestion +
"</td>" + "<td>" + "<img src='angel_wrong.gif'>" + "</td>" +
"</tr>" + "</table>");
}
function writeBeginning() {
top.bottom_left.document.clear();
top.bottom_left.document.open();
top.bottom_left.document.write("<html>" + "<head>" + "</head>" + "<body>" + "<form name='quiz_questions'>");
}
//This function writes the concluding part of each quiz question table in the bottom_left frame, except for the last one.
//The last one's Next button has to call a different function, so I wrote the next function to do that.
function writeEnding(){
top.bottom_left.document.write("<img name='fish_first' src='next.gif' align='right' onMouseOver='top.top_left.swapper();' onMouseOut='top.top_left.unswapper();' onMouseUp='top.top_left.onNext();'>" +
"</form>" + "</body>" + "</html>")
}
//This function writes the concluding part of the last question, which has a next button that calls a
//different function.
function writeEndingLast(){
top.bottom_left.document.write("<img name='fish_first' src='next.gif' align='right' onMouseOver='top.top_left.swapper();' onMouseOut='top.top_left.unswapper();' onMouseUp='top.top_left.writeMailTable();'>" +
"</form>" + "</body>" + "</html>")
}
function writeMailTable(){
top.top_right.document.open();
top.top_right.document.write("<font face='arial, verdana, helvetica'>" + "<center>" + "Thank you for" + "<br>" + "taking the quiz," + " " + userName + "!" + "<br><br>" + "</center>");
top.bottom_right.document.open();
top.bottom_right.document.write("<font face='arial, verdana, helvetica'>" + "<center>" + "If you don't have questions" + "<br>" + "you'd like to have answered," + " " + "<a href='http://www.archden.org' target='_blank')>" + "return to the" + "<br>" + "Archdiocese of Denver home page." + "</a>" + "</center>");
top.bottom_left.document.open();
top.bottom_left.document.write("<font face='arial, verdana, helvetica'>" + "Do you have questions about this quiz," + " " + userName + "?" + " " + "<img src='angel_final.gif' align='right'>" + "Post them in"
+ " " + "<a href='http://www.archden.org/ubb' target='_blank')>" + "The Upper Room," + "</a>" + " " + "the online community of the Archdiocese of Denver, in the 'What Does the Church Teach About ...?' forum!");
}
function onNext() {
//Write a table to the_questions.htm that includes a variable for the new question.
if(currentQuestion==3) {
currentQuestion++;
textChecker();
doTheMath();
top.bottom_left.document.open();
top.bottom_left.document.write("<font face='arial, verdana, helvetica'>" + "<center>" + "You got" + " " + "<b>" + finalPercent + "%" + "</b>" + " " + "of the questions right," + " " + userName + "!" + "<br>" + "Click on the 'Next' fish" + "<br>" + "one more time to find out" + "<br>" + "how to get answers for those questions you missed." + "</center>" + "</font>");
writeEndingLast();
} else {
currentQuestion++;
checkQuestionType();
writeBeginning();
writeEachQuestion();
writeEnding();
}
}
//The doTheMath function divides the score by 20, and that multiplies that value by 100 to come up
//with a final percentage value. That is used in the string written at the end (in the above onNext function).
function doTheMath(){
thePercent=score/4;
finalPercent=thePercent*100;
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="writeBeginning(); writeEachQuestion(); writeEnding();">
<img src="title.gif" width="371" height="109">
<script language="JavaScript">
</script>
</body>
</html>
Hello, I would like to program a custom link for my visitors, which will fill a payment form on an external page automatically. As an ultimate goal, I would like to press a link, which will send necessary information to this external page, fill it in the right forms, and press "submit" button there. If there is no way to do all these tasks in only one link, then just filling the forms would be great. I've tried something like: Code: <a
href="https://load.payoneer.com/LoadToPage.aspx"
style="cursor:pointer;"
onclick="document.getElementById('emailAddress').value='somemail@mail.com';">
Pay to "somemail@mail.com"
</a>
Unfortunately this approach didn't work for me. The other problem is that I need to fill more fields on this external page (https://load.payoneer.com/LoadToPage.aspx), like payment amount, email address, reason for payment, etc. I've found out that I can send Email as a parameter in an URL: https://load.payoneer.com/LoadToPage...email@mail.com (will work only with a valid email, as it goes through a validation on their page). Is there any way to get the names of other parameters (like "email", "payment", etc.)? Please let me know if there are any possible ways to program such a task. I believe that JavaScript should be used here, but if not, please advise me on different ways of programming such a solution. Thank you in advance, Anatoliy. Hi everyone, I have a very simple fill-in-the-blank quiz that I would like to add a randomizer to. Right now, the quiz has 3 questions that are asked one at a time, in order. I want to increase this to 100 possible questions (that part I can do), but I want the script to randomly choose 10 of them to ask. Then once the person has taken the quiz, they would be able to try again with 10 new questions. The script is live he http://www.elearnfrenchlanguage.com/...verb-quiz.html I have a quiz with a randomizing script, but it's for multiple choice questions, and I don't know how to adapt it so that it works with my script. Here is the working quiz: http://french.about.com/library/week...frenchquiz.htm And here is the randomizing script: http://french.about.com/library/weekly/longquiz.js I'd be so grateful for any help. Hi All, Firstly - apologies to anyone who has read this in the PHP forum - I was not sure if I needed to post it there or here! I have a PHP form which has an select field (i.e. drop-options) where the different options are populated from a MySQL database as follows: Code:
<select size="1" id="category" name="category">
<option value="">Select from drop-list:</option>
<?php
$sql = "SELECT * FROM `DB1`
ORDER BY list_category ASC";
$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
while ($row = mysql_fetch_assoc($sql_result)) {
if ($row["list_category"]<>'') {
echo '<option value="';
echo nl2br(stripslashes(utf8_decode($row["list_category"]))).'">';
echo nl2br(stripslashes(utf8_decode($row["list_category"]))).'</option>';
};
};
?>
</select>
Now, the issue I have is that I also have another input field (possibly hidden) in this form which is called 'category_id', and what I want it to do is to automatically populate when the user selects the relevant 'category' from the select field above. EDIT: Sorry - should also have told you that the 'category_id' is associated with the 'category' field above in the same database, DB1. Can anyone recommend any way of doing this? Thanks, Neil hey guys so I need a way to auto select certain radio buttons and then submit the page. here is the form: https://spreadsheets.google.com/view...I0NGNiMDQ&ifq0 for questions 1 and 2 i would like the answer submitted to be "no" and for all others "no" ive been trying to do this with the little coding knowledge i have for 2 hours with no success. thanks in advance guys/gals! I was wondering if someone could help me? In my code below what if answers in question 2 were allowed to be in any order? Like: hips,body,knees or knees,hips,body and so on. How should I modify my code? Anyone please???? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Quiz</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
var answer_list = [
['False'],
['body,hips,knees']
// Note: No comma after final entry
];
var response = [];
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
function setAnswer(question, answer) {
response[question] = answer;
}
function CheckAnswers() {
var correct = 0;
var resp, answ;
for (var i = 0; i < answer_list.length; i++) {
resp = response[i].toString();
resp = resp.toLowerCase();
answ = answer_list[i].toString();
answ = answ.toLowerCase();
//#################################################################################################
if (resp == answ) {
correct++;
if(i==0){
document.forms[0].a1c.style.backgroundImage="url('correct.gif')";
document.forms[0].a1c.value = "";
}
else{
document.forms[0].a1d.style.backgroundImage="url('correct.gif')";
document.forms[0].a1d.value = "";
}
}
else{
if(i==0){
document.forms[0].a1c.style.backgroundImage = "url('incorrect.gif')";
document.forms[0].a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet.";
}
else{
document.forms[0].a1d.style.backgroundImage = "url('incorrect.gif')";
document.forms[0].a1d.value = " ANS: " + answ;
}
//###################################################################################################
}
}
document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!");
}
</script>
</head>
<body>
<form action="" method="post">
<div>
<b>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</b><br />
<label><input type="radio" name="question0" value="True" />True</label>
<label><input type="radio" name="question0" value="False" />False</label>
<br />
<textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea>
<br />
<b>2. When taking a supine length measurement, straighten the infant's
<input type="text" name="question1_a" size="10" />,
<input type="text" name="question1_b" size="10" />, and
<input type="text" name="question1_c" size="10" />.</b>
<br />
<textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea>
<br />
<input type="button" name="check" value="Check Answers" onclick="setAnswer(0,getCheckedValue(document.forms[0].question0));setAnswer(1,[document.forms[0].question1_a.value,document.forms[0].question1_b.value,document.forms[0].question1_c.value]);CheckAnswers();" />
</div>
</form>
</body>
</html>
I have about 100 pages of HTML, and I want to only have to put in the specific data once. My Javascript is rusty and I am on a short fuse, unfortunately, so some help would be appreciated. All pages have one picture with URL path to the image, an initial width, and a title string. I would like to define these once in a Javascript etc, and have a script plug those values into the page Title, the width of the pic <img> tag, the URL of the src of the pic, and a text title in the body (above the pic) of the page. -- I think I need <body onload="mySetup('myTitle string', picWidth, '<picURL>')> then in the script I would need: window.title = myTitle; bodyText.innerHTML = myTitle; myPic.width = picWidth; myPic.src = picURL; myPic.alt = myTitle; then <img id="myPic" onclick="myClickHandler( )"> --------------- But messing about with this has not gotten me a working page. Would some kind person help out? Thanks! Hello everyone! I have a select (combo box) element that gets filled with items when selected item changed in another one (master combo box). It works in Chrome, FireFox but not in IE (all latest browser versions). How do I populate the items in the child combo box: - ajax call of a PHP script - that returns items for the combo box: echo '<option value="' . $id . '">' . $name . '</option>'; - setting innerHTML attribute of the child combo box to a value that gets returned by the ajax call: document.forms['parametersForm'].elements['stationId'].innerHTML = html; Do I need to return JSON object (or XML) by the PHP script and programically add items (in JavaScript) in the ajax callback or is there an alternative? Obviously building DOM with echoing PHP result doesn't work well in IE. Thanks for your future help! Regards I have an html page "PageA" which contains a "link" to another html page "PageB". The link is handled as a form submit because PageA sends some variables which it wants "processed". However, PageB is NOT a CGI script but simply another html page which happens to contain a form. This form handles the desired processing. I would appreciate some help getting some javascript in place, in PageA, in order to automatically fill in a form field in PageB with a variable supplied by PageA. The complications here a 1) PageB is not a CGI script and so sending variables via a query string does not work. (The variables never get read by PageB.) 2) PageB is maintained by another organisation so I cannot modify it. (Actually I could, as I have a local copy, but I would have to redo after every new release and so this is not acceptable.) It therefore needs to be treated as an independent page. 3) The variable is quite a lengthy one, it is extracted from a database and changes depending on how PageA was called, so I want to do this for repeated instances and cutting and pasting to a new page on each occasion is not attractive. 4) I would like to open PageB in a separate window or tab as I want to be able to reference both pages at once. (This is not essential to the key problem but may influence the solution. A solution which depended on the window being the same I would not regard as satisfactory.) The relationship between the documents is probably most accurately described as "PageB is a section of PageA". It is providing some additional information on aspects of what is in PageA. The output from submission of PageB can be quite lengthy. The actual form field in PageB I want to fill in is a textarea element and I know its name (call it name1) and also the name of the form (call it form1). But I don't think the field type should be important. I simply want to update its value (presumably after a page load?). Is this possible without editing PageB? I would appreciate some guidance if not a proven solution. Perhaps I have overlooked something but I can't find a working solution to this particular problem and my experiments to date don't work. Thanks Thanks for reading. I believe this is a JavaScript question, but if not, let me know and I'll move to another heading. I'd like a script that would allow a user to complete a sentence in a maximum of 140 characters (we'll let Twitter set the standard) and then rotate each users output on the screen. I also need to capture a name and email address. Example: "A man is _______________" Name________________ Email ________________ Output (to be displayed and rotated above the form) A man is a friend. I believe a HTML form will capture the info, but I'm unclear on how to have the output and name appear on the same screen and rotate between responses. Many Thanks. Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31. For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked. As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again. Here is my code: Code: var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
return nationalDays(date);
}
function ArrayIndexOf(array,item,from){
var len = array.length;
for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
if (array[i] === item) return i;
}
return -1;
}
function ArrayContains(array,item,from){
return ArrayIndexOf(array,item,from) != -1;
}
Any help would be great! David Hello, I am a newbie to this forum. I have searched for the problem that I have in this forum but found none. I am creating a calendar using html/css and javascript. I used one the free javascript for calendar on the internet and modified it to the way I wanted it to be. However, I could not write the if statement so that the calendar will highlight the current date of the current month only, not all 12 months. And I could not write the if statement so that the calendar will know what day is a holiday and make it red color. Here is my code: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Calendar</title>
<style type="text/css">
#left {position:absolute;left:40px;top:10px;}
#right {position:absolute;left:400px;top:10px;}
.table1 {border-collapse:collapse;background-color:#efefef;}
.th2 {height:10px;background-color:#eeeee0;color:#951159;font-size:10px;}
.sunday {background-color:#DD2211;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.day {background-color:navy;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;}
.date0 {border:1px solid #cccccc;font-size:10px;color:red;font-weight:bold;text-align:center;} /* This is the color for Sundays and Holidays */
.date1 {border:1px solid #cccccc;font-size:10px;height:10px;font-weight:bold;text-align:center;} /* This is the color for regular days */
.today {border:1px solid #cccccc;font-size:10px; color:#0000ff;background-color:#daffee;} /* This is the color for current day */
</style>
</head>
<body bgcolor=#cccccc>
<div id="left">
<script>
var i=0;
for (i=0;i<=5;i++)
{
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December
// return number of days in the specified month (parameter)
return ar[month]
}
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE", "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
// return name of specified month (parameter)
return ar[month]
}
setCal()
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)
// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
// number of days in current month
var days = getDays(month, year)
// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' ' + year
text += '</TH>' // close header cell
// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
if (dayNum == 0) {
text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
} else {
text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
}
}
text += '</TR>'
// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (col ==1) { // This is to make the text color red if it is Sunday
text += '<TD class="date0">' + digit + '</TD>'
} else
/* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday
text += '<TD class="date0">' + digit + '</TD>'
} else */
/* if (digit == date) { // current cell represent today's date
text += '<TD class="today">'
text += digit
text += '</TD>'
} else */
text += '<TD class="date1">' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'
// print accumulative HTML string
document.write(text)
}
}
</script>
</div>
<!-- #################################################################### -->
<div id="right">
<script>
var i=0;
for (i=0;i<=5;i++)
{
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December
// return number of days in the specified month (parameter)
return ar[month]
}
function getMonthName(month) {
// create array to hold name of each month
var ar = new Array( "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER")
// return name of specified month (parameter)
return ar[month]
}
setCal()
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getFullYear()
var current_month = now.getMonth()
var date = now.getDate()
now = null
var month = i
var monthName = getMonthName(month)
// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
// number of days in current month
var days = getDays(month, year)
// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE class="table1">' // table settings
text += '<TH COLSPAN=7 class="th2">'
text += monthName + ' ' + year
text += '</TH>' // close header cell
// create array of abbreviated day names
var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT")
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
if (dayNum == 0) {
text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>'
} else {
text += '<TD class="day">' + weekDay[dayNum] + '</TD>'
}
}
text += '</TR>'
// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="left" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (col ==1) { // This is to make the text color red if it is Sunday
text += '<TD class="date0">' + digit + '</TD>'
} else
/* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday
text += '<TD class="date0">' + digit + '</TD>'
} else */
/* if (digit == date) { // current cell represent today's date
text += '<TD class="today">'
text += digit
text += '</TD>'
} else */
text += '<TD class="date1">' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'
// print accumulative HTML string
document.write(text)
}
}
</script>
</div>
</body>
</html>
This is just for my practice in html/css and javascript. Thanks for all your time and support. kvkt I have a calendar and when selecting the date the date format inserted to text box is in the format ' 10/10/2010'. This is not getting inserted into oracle database. Oracle accepts only the format '10-OCT-10' . So please help me to change the format of date that getting selected from calendar. Code is given below (calendar.html, calendar.js & style.css) //calendar.html Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="standard.css" type="text/css" />
<script type="text/javascript" src="calendar.js"></script>
<title>CALENDAR</title>
</head>
<body>
<label>Date : </label><input name="startdate" type="text" onClick="displayDatePicker('startdate')">
<script type="text/javascript">
window.onLoad(displayDatePicker('ADate'));
</script></body></html>
//calendar.js Code: var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";
var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
// these variables define the date formatting we're expecting and outputting.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator = "/"; // common values would be "/" or "."
var defaultDateFormat = "dmy" // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;
function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
var targetDateField = document.getElementsByName (dateFieldName).item(0);
// if we weren't told what node to display the datepicker beneath, just display it
// beneath the date field we're updating
if (!displayBelowThisObject)
displayBelowThisObject = targetDateField;
// if a date separator character was given, update the dateSeparator variable
if (dtSep)
dateSeparator = dtSep;
else
dateSeparator = defaultDateSeparator;
// if a date format was given, update the dateFormat variable
if (dtFormat)
dateFormat = dtFormat;
else
dateFormat = defaultDateFormat;
var x = displayBelowThisObject.offsetLeft;
var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
// deal with elements inside tables and such
var parent = displayBelowThisObject;
while (parent.offsetParent) {
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop ;
}
drawDatePicker(targetDateField, x, y);
}
/**
Draw the datepicker object (which is just a table with calendar elements) at the
specified x and y coordinates, using the targetDateField object as the input tag
that will ultimately be populated with a date.
This function will normally be called by the displayDatePicker function.
*/
function drawDatePicker(targetDateField, x, y)
{
var dt = getFieldDate(targetDateField.value );
// the datepicker table will be drawn inside of a <div> with an ID defined by the
// global datePickerDivID variable. If such a div doesn't yet exist on the HTML
// document we're working with, add one.
if (!document.getElementById(datePickerDivID)) {
// don't use innerHTML to update the body, because it can cause global variables
// that are currently pointing to objects on the page to have bad references
//document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
var newNode = document.createElement("div");
newNode.setAttribute("id", datePickerDivID);
newNode.setAttribute("class", "dpDiv");
newNode.setAttribute("style", "visibility: hidden;");
document.body.appendChild(newNode);
}
// move the datepicker div to the proper x,y coordinate and toggle the visiblity
var pickerDiv = document.getElementById(datePickerDivID);
pickerDiv.style.position = "absolute";
pickerDiv.style.left = x + "px";
pickerDiv.style.top = y + "px";
pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
pickerDiv.style.zIndex = 10000;
// draw the datepicker table
refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}
/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldName, year, month, day)
{
// if no arguments are passed, use today's date; otherwise, month and year
// are required (if a day is passed, it will be highlighted later)
var thisDay = new Date();
if ((month >= 0) && (year > 0)) {
thisDay = new Date(year, month, 1);
} else {
day = thisDay.getDate();
thisDay.setDate(1);
}
// the calendar will be drawn as a table
// you can customize the table elements with a global CSS style sheet,
// or by hardcoding style and formatting elements below
var crlf = "\r\n";
var TABLE = "<table cols=7 class='dpTable'>" + crlf;
var xTABLE = "</table>" + crlf;
var TR = "<tr class='dpTR'>";
var TR_title = "<tr class='dpTitleTR'>";
var TR_days = "<tr class='dpDayTR'>";
var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
var xTR = "</tr>" + crlf;
var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
var TD_title = "<td colspan=5 class='dpTitleTD'>";
var TD_buttons = "<td class='dpButtonTD'>";
var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
var TD_days = "<td class='dpDayTD'>";
var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event
var xTD = "</td>" + crlf;
var DIV_title = "<div class='dpTitleText'>";
var DIV_selected = "<div class='dpDayHighlight'>";
var xDIV = "</div>";
// start generating the code for the calendar table
var html = TABLE;
// this is the title bar, which displays the month and the buttons to
// go back to a previous month or forward to the next month
html += TR_title;
html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD;
html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD;
html += xTR;
// this is the row that indicates which day of the week we're on
html += TR_days;
for(i = 0; i < dayArrayShort.length; i++)
html += TD_days + dayArrayShort[i] + xTD;
html += xTR;
// now we'll start populating the table with days of the month
html += TR;
// first, the leading blanks
for (i = 0; i < thisDay.getDay(); i++)
html += TD + " " + xTD;
// now, the days of the month
do {
dayNum = thisDay.getDate();
TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
if (dayNum == day)
html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
else
html += TD + TD_onclick + dayNum + xTD;
// if this is a Saturday, start a new row
if (thisDay.getDay() == 6)
html += xTR + TR;
// increment the day
thisDay.setDate(thisDay.getDate() + 1);
} while (thisDay.getDate() > 1)
// fill in any trailing blanks
if (thisDay.getDay() > 0) {
for (i = 6; i > thisDay.getDay(); i--)
html += TD + " " + xTD;
}
html += xTR;
// add a button to allow the user to easily return to today, or close the calendar
var today = new Date();
var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
html += TR_todaybutton + TD_todaybutton;
html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> ";
html += xTD + xTR;
// and finally, close the table
html += xTABLE;
document.getElementById(datePickerDivID).innerHTML = html;
// add an "iFrame shim" to allow the datepicker to display above selection lists
adjustiFrame();
}
/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldName, dateVal, adjust, label)
{
var newMonth = (dateVal.getMonth () + adjust) % 12;
var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
if (newMonth < 0) {
newMonth += 12;
newYear += -1;
}
return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";
}
/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{
var dayString = "00" + dateVal.getDate();
var monthString = "00" + (dateVal.getMonth()+1);
dayString = dayString.substring(dayString.length - 2);
monthString = monthString.substring(monthString.length - 2);
switch (dateFormat) {
case "dmy" :
return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
case "ymd" :
return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
case "mdy" :
default :
return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
}
}
/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
var dateVal;
var dArray;
var d, m, y;
try {
dArray = splitDateString(dateString);
if (dArray) {
switch (dateFormat) {
case "dmy" :
d = parseInt(dArray[0], 10);
m = parseInt(dArray[1], 10) - 1;
y = parseInt(dArray[2], 10);
break;
case "ymd" :
d = parseInt(dArray[2], 10);
m = parseInt(dArray[1], 10) - 1;
y = parseInt(dArray[0], 10);
break;
case "mdy" :
default :
d = parseInt(dArray[1], 10);
m = parseInt(dArray[0], 10) - 1;
y = parseInt(dArray[2], 10);
break;
}
dateVal = new Date(y, m, d);
} else if (dateString) {
dateVal = new Date(dateString);
} else {
dateVal = new Date();
}
} catch(e) {
dateVal = new Date();
}
return dateVal;
}
/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
var dArray;
if (dateString.indexOf("/") >= 0)
dArray = dateString.split("/");
else if (dateString.indexOf(".") >= 0)
dArray = dateString.split(".");
else if (dateString.indexOf("-") >= 0)
dArray = dateString.split("-");
else if (dateString.indexOf("\\") >= 0)
dArray = dateString.split("\\");
else
dArray = false;
return dArray;
}
function updateDateField(dateFieldName, dateString)
{
var targetDateField = document.getElementsByName (dateFieldName).item(0);
if (dateString)
targetDateField.value = dateString;
var pickerDiv = document.getElementById(datePickerDivID);
pickerDiv.style.visibility = "hidden";
pickerDiv.style.display = "none";
adjustiFrame();
targetDateField.focus();
// after the datepicker has closed, optionally run a user-defined function called
// datePickerClosed, passing the field that was just updated as a parameter
// (note that this will only run if the user actually selected a date from the datepicker)
if ((dateString) && (typeof(datePickerClosed) == "function"))
datePickerClosed(targetDateField);
}
/**
Use an "iFrame shim" to deal with problems where the datepicker shows up behind
selection list elements, if they're below the datepicker. The problem and solution are
described at:
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
*/
function adjustiFrame(pickerDiv, iFrameDiv)
{
// we know that Opera doesn't like something about this, so if we
// think we're using Opera, don't even try
var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if (is_opera)
return;
// put a try/catch block around the whole thing, just in case
try {
if (!document.getElementById(iFrameDivID)) {
// don't use innerHTML to update the body, because it can cause global variables
// that are currently pointing to objects on the page to have bad references
//document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
var newNode = document.createElement("iFrame");
newNode.setAttribute("id", iFrameDivID);
newNode.setAttribute("src", "javascript:false;");
newNode.setAttribute("scrolling", "no");
newNode.setAttribute ("frameborder", "0");
document.body.appendChild(newNode);
}
if (!pickerDiv)
pickerDiv = document.getElementById(datePickerDivID);
if (!iFrameDiv)
iFrameDiv = document.getElementById(iFrameDivID);
try {
iFrameDiv.style.position = "absolute";
iFrameDiv.style.width = pickerDiv.offsetWidth;
iFrameDiv.style.height = pickerDiv.offsetHeight ;
iFrameDiv.style.top = pickerDiv.style.top;
iFrameDiv.style.left = pickerDiv.style.left;
iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
iFrameDiv.style.visibility = pickerDiv.style.visibility ;
iFrameDiv.style.display = pickerDiv.style.display;
} catch(e) {
}
} catch (ee) {
}
}
//style.css Code: body { margin:5px 5px; font-size:0.9em; font-family: "Myriad Pro", "Trebuchet MS", Arial; font-size:14px; border:1px solid #000; background-color:#CCCCFF;}
a { color:#64a520; text-decoration:none;}
a:hover { text-decoration:underline;}
/*Calendar Styles*/
/* the div that holds the date picker calendar */
.dpDiv {
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color:#000000;
background-color:#99CCCC;
border: 1px solid #AAAAAA;
}
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
background-color: #aca998;
border: 1px solid #888888;
cursor: pointer;
color: red;
}
/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
color: white;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
font-size: 12px;
color: gray;
font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
color: 4060ff;
font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
padding: 0px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
}
|
|||||||