JavaScript - Problem On Ie With The Date Loading On A Booking Form

Hi guys,

I am new here and am looking for a bit of help! I am building a website for a friend and am using Javascript. When I preview the site from my computer in Chrome/Firefox then all the JS elements render correctly.

I am using jCarouselLite by the way and have used HTML Boilerplate too.

However, when I upload the site the Carousel does not work...

Also, I seem to have a lot of scripts kicking around inside the html so I will give you a list of those, but here are my external JS files so my question before posting up all the code are 1.) what is the problem with rendering the JS elements live on t'internet, and 2.) can I reduce the amount of JS files/scripts to help page loading times?
css_browser_select.js modernizr-1.7.min.js jquery-1.6.1.min.js jcarousellite.js functions.js Code:

$(document).ready(function(){
	// Activate the main slider	
	$("#mainSlider").jcarousellite({
		btnNext: "#sliderBtnNext",
		btnPrev: "#sliderBtnPrev",
		visible: 1
	});
});

plugins.js script.js jquery.placeholder.min.js
and this is the code inside my HTML:

Head:

Code:

    <!-- CSS: implied media="all" -->
    <link rel="stylesheet" href="css/style.css" media="screen">
    <link rel="stylesheet" media="handheld" href="css/handheld.css">
    
    <!-- CSS Browser Compatibility --> 
	<script src="js/css_browser_select.js"></script>
    
    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
    <script src="js/libs/modernizr-1.7.min.js"></script>

/Head

and this is at the bottom of the Body:

Code:

    <script src="js/libs/jquery-1.6.1.min.js"></script>
    <script src="js/libs/jcarousellite.js"></script>
    <script src="js/libs/functions.js"></script>

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.1.min.js'>\x3C/script>")</script> 
    
    <!-- scripts concatenated and minified via ant build script--> 
    <script src="js/plugins.js"></script> 
    <script src="js/script.js"></script> 
    
    <!-- THIS MAY NEED TO BE REDONE! Placeholder for Forms --> 
    <script src="js/libs/jquery.placeholder.min.js"></script> 
    <script>
    if (!Modernizr.input.placeholder){
     $('input[placeholder], textarea[placeholder]').placeholder();
    }
    </script> 
    
    <!-- Form Submit --> 
    <script>
    function submitForm()
    {
      document.contactPhone.submit();
    }
    </script> 
    
    <!-- Google Analytics Script - Change UA-XXXXX-X to be your site's ID --> 
    <script>
        var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
        g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
        s.parentNode.insertBefore(g,s)}(document,"script"));
      </script> 
    
    <!-- Bookmark Script --> 
    <script>
    function bookmark_us(url, title){
    
    if (window.sidebar) // firefox
        window.sidebar.addPanel(title, url, "");
    else if(window.opera && window.print){ // opera
        var elem = document.createElement('a');
        elem.setAttribute('href',url);
        elem.setAttribute('title',title);
        elem.setAttribute('rel','sidebar');
        elem.click();
    }
    else if(document.all)// ie
        window.external.AddFavorite(url, title);
    }
    </script>

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

Hello everyone,

I am just beginning to learn javascript, and I am trying to create a little game where when a user hovers over a picture it changes, and things like that.

At the moment I have been trying to make it so that the pictures tile so they fill the whole page area, dynamically so that it changes depending on the users browser size (px). The images have many attributes so I can't just tile them with css as they need to be actual elements.

The problem is the code doesn't run, and I can't work out why. I think all the lines that require it have semi colons and its all correct.

Forgive me if the answer is clear but as I said I only just started learning.

Anyway, on with the code:
Code:

<!doctype html>
<html lang="en">
<head>
<title>Hi, I'm a button.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="javascript">
	function mainDo() {
	if (document.body && document.body.offsetWidth) {
		winW = document.body.offsetWidth;
		winH = document.body.offsetHeight;
	}
	if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
		winW = document.documentElement.offsetWidth;
		winH = document.documentElement.offsetHeight;
	}
	if (window.innerWidth && window.innerHeight) {
		winW = window.innerWidth;
		winH = window.innerHeight;
	}
	document.write('Width = ' + winW + 'Height = ' + winH);
	winW=winW/127;
	winH=winH/128;
	winW=Math.round(winW);
	winWs=winW;
	winH=Math.round(winH);
	winHs=winH;
	document.write('Width = ' + winW + 'Height = ' + winH);
	while (winH>0) {
		while (winW>0) {
		document.write('<img onMouseover="this.src=\'img/hibutton_orange.png\'" onClick="this.src=\'img/hibutton_green.png\'" ondblClick="this.src=\'img/hibutton_blue.png\'" src="img/hibutton_blue.png">');
		winW=winW-1;
		}
		document.write('\n' + '<br>');
		winW=winWs;
		winH=winH-1;
	}
	}
</script>
</head>
<body onload="maindo()">
</body>
</html>

I am using this code... simplified for example

Code:

[
<script type="text/javascript">

function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>



<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"


<div id="content"></div>

Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks

I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week
Thanking you,
L.Rajesh
rajboy13@gmail.com

my code is

Code:

function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

 var cellLeft = row.insertCell(0);
  var sl = document.createElement('input');
  sl.type = 'text';
  sl.name = 'sln' ;
  sl.id = 'sln' + iteration;
  sl.value = iteration;
  sl.size = 3;
  sl.readOnly = true;
  cellLeft.appendChild(sl);

var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);

var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";

var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);

}

the button code is :
Code:

</br>
 <fieldset style="width:60%;" align="center"> <legend>


<SCRIPT LANGUAGE="JavaScript">
function deleteRow(b){
    document.getElementById('table_formcontainer').deleteRow(b)
}
function CompareDates1() 
{ 
	var str1  = document.getElementById("start").value;   
	var str2  = document.getElementById("edate").value;  
	var dt1   = parseInt(str1.substring(0,2),10);    
	var mon1  = parseInt(str1.substring(3,5),10);  
	var yr1   = parseInt(str1.substring(6,10),10);   
	var dt2   = parseInt(str2.substring(0,2),10);    
	var mon2  = parseInt(str2.substring(3,5),10);   
	var yr2   = parseInt(str2.substring(6,10),10);   
	var date1 = new Date(yr1, mon1, dt1);    
	var date2 = new Date(yr2, mon2, dt2);    
	if(date2 < date1)  
		{      
			alert("To date cannot be greater than from date");      
			return false;   
		}    
	else   
		{      
			alert("Submitting ...");     
			document.form1.submit();   
		} 
		return true;
}
function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

 var cellLeft = row.insertCell(0);
  var sl = document.createElement('input');
  sl.type = 'text';
  sl.name = 'sln' ;
  sl.id = 'sln' + iteration;
  sl.value = iteration;
  sl.size = 3;
  sl.readOnly = true;
  cellLeft.appendChild(sl);

var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);

var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";

var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);

}

function delRow1(c)
{
    document.getElementById('tblMed').deleteRow(c)
}

function validate()
{
	
	var tbl = document.getElementById('tblMed');
    var lastRow= tbl.rows.length-1;
   	var a;

    for (a=1; a<=lastRow; a++)
		{
      var def = document.getElementById('sln'+ a);
      var ghi = document.getElementById('Mdesc'+ a);
	   var jkl = document.getElementById('Mqty'+ a);
	   var jkl1 = document.getElementById('Mqty'+ a).value;
       var abc = document.getElementById('Mbill'+ a);
       var gpexpdt2 = document.getElementById('tblMed').value;
      var str11  = document.getElementById("sdate").value; 
      var str12  = document.getElementById("edate").value;
	  var tranday = jkl1.substring(0,2);
      var tranmon = jkl1.substring(3,5);
      var tranyear = jkl1.substring(6,10);
	


	var trandate = new Date(tranyear,tranmon,tranday);
	 var tranday2 = str11.substring(0,2);
	  
          var tranmon2 = str11.substring(3,5);
         


	var tranyear2 = str11.substring(6,10);
	


	var trandate2 = new Date(tranyear2,tranmon2,tranday2);
	var tranday3 = str12.substring(0,2);
	  
          var tranmon3 = str12.substring(3,5);
         


	var tranyear3 = str12.substring(6,10);
	


	
if ((document.getElementById("AC").value == ""))
{
alert ( "Please enter Amount Claimed." );
document.form5.AC.focus();
return false;
}

else if((document.getElementById("Amb").value == ""))
{
alert ( "Please enter Relationship" );
document.form5.Amb.focus();
return false;
}

if ( document.form5.Treat.selectedIndex == "")
    {
        alert ( "Please select Treatment Type" );
		document.form5.Treat.focus();
        return false;
    }

else if((document.getElementById("C10").value == ""))
{
alert ( "Please enter Total " );
document.form5.C10.focus();
return false;
}

else if((document.getElementById("C11").value == ""))
{
alert ( "Please enter Place " );
document.form5.C11.focus();
return false;
}

else if((document.getElementById("start").value == ""))
{
alert ( "Please enter from date" );
document.form5.start.focus();
return false;
}

else if((document.getElementById("edate").value == ""))
{
alert ( "Please enter to date" );
document.form5.edate.focus();
return false;
}
    if (ghi.value.length == "")
	  {
        alert('Please enter Bill No');
        ghi.focus();

        return false;
      }
	  if (jkl.value.length == "")
	  {
        alert('Please enter Date');
	   jkl.focus();
        return false;
      }
	  var trandate3 = new Date(tranyear3,tranmon3,tranday3);
	if (tranmon > 12|| tranmon < 1)
		 {
			 alert('Invalid Month In Date Field .Enter as dd-mm-yy');
        	jkl.focus();
			 return false;
		 }
		 if (tranday > 31|| tranday < 1)
		 {
			 alert('Invalid Date In Date Field Enter as dd-mm-yy');
			 		jkl.focus();
			 return false;
		 }
		 if(trandate2.getTime() > trandate.getTime())
			{
	alert("Bill date should be less than From date");
	jkl.focus();
	return false;
			}
			if(trandate3.getTime() < trandate.getTime())
			{
	alert("Bill date should not  be greater than End date");
	jkl.focus();
	return false;
			}
	
     if (abc.value.length == "")
	  {
        alert('Please enter Amount');
	    abc.focus();
        return false;
      }
	  	
	 
var str3  = document.getElementById("AC").value;
var str4  = document.getElementById("Amb").value;

if(parseInt(str3) > parseInt(str4))
{
alert('Amount Claimed must be less than Amount Balance');
document.form5.AC.focus();
return false;
}	
var alertsay = ""; 
if (form5.Treat.value > 4)
{
alert("Sorry You Can Not This Employee Data In Database..........");
form5.Treat.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = abc.value;
var allValid = true;
var allNum = "";
for (e = 0;  e < checkStr.length;  e++)
{
ch = checkStr.charAt(e);
for (f = 0;  f < checkOK.length;  f++)
if (ch == checkOK.charAt(f))
break;

if (f == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Invalid Data Please enter only digits'");
abc.focus();
return (false);
}
}
 return true;
}
var count =0;
function Check()
	{
if (!validate())
	return true;
	 addRow()
	}
function removeRow1()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
function deleteRow(node) {
if (rowNum > 1) {
var td = node.parentNode; 
while (td.tblMed.toLowerCase() != "tr") 
td = td.parentNode; 
td.parentNode.removeChild(td); 
rowNum = rowNum - 1;
document.form1.count.value = rowNum;
}
else { 
alert ("You cannot delete the last remaining row");
} 
}

</script>

<b><font color="#153E7E"border="1">Bill Details</b></legend><br>
<table id="tblMed" width="75%">
<tr>
<th>Sl.No.</th>
<th align="left">Bill No</th>
<th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th>
<th>Bill Amount( <span class="WebRupee">Rs.</span> )</th>

</tr>

</table>
<tr><br/>
&nbsp &nbsp <input name="button" type="button" value="Add  Bill" onClick="Check()"/>

................................................................................................



i want popup calender in 3rd row of the table

please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hello all,

I want to sell online private lessons using Skype.
I'd like to display on my front page a schedule with my available time-slots so that the customer may click a time-slot and be sent to the product/lesson detail view to complete the purchase.

1. Would it be possible for a JQuery calendar/schedule plugin to know that the customer has completed the purchase and therefore make it impossible for another user to purchase the same time-slot (by changing it's appearance and making it unclickable for example)?
2. Can a JQuery plugin be adapted to that use?
3. Would it be very complex to do for a developer?

Thanks for your advice

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.

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.

Hello!
First of all, sorry my bad english.
(and javascripting skills...)

I have a problem with date formatting!
My code is supposed to get the day of the week from date format like dd.mm.yyyy (01.01.2010, 31.12.2010) but it only works if date format is like "28 December, 2000".

Code is he
Code:

<script type="text/javascript">

function getTheDay(aText) {

myDays=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]

myDate=new Date(eval('"'+aText.value+'"'))

document.form1.textDay.value=myDays[myDate.getDay()]

}

</script>


<form name="form1" id="form1" method="post" action="" enctype="text/plain">

<input type="text" name="textDate" id="textDate" value="" size="25" onchange="getTheDay(this.form.textDate)" />

<br />

<input type="text" name="textDay" size="25" maxlength="25" />

</form>

Original code: http://www.trans4mind.com/personal_d...ript/time2.htm

Can anyone help me?
I have tried everything what i have find from google...


Thanks to you all who help me with this!
-Roosterr

I am having some trouble with my code in that I am trying to take the value from the date of birth field and check to see if over 18 years old. I they are not over 18, a window.alert dialog box pops up to tell them. Any help with this I would greatly appreciate.

Below is the check if 18 validation.

Script section in the document head:
Code:

                        //check if over 18
			
	         function overAge(){
				var age;
				var input = document.forms[0].birthDate.value;
				var pyear = parseInt(input.substring(6,10));
				var pmonth = parseInt(input.substring(0,2)) - 1;
				var pday = parseInt(input.substring(3,5));
	
				if ( month < pmonth ){
					age = year - pyear - 1;
				}
				else if ( month > pmonth ){
					age = year - pyear;
				}
				else if ( month == pmonth ){
					if ( day < pday ){
						age = year - pyear - 1;
					}
					else if ( day > pday ){
						age = year - pyear;
					}
					else if ( day == pday ){
						age = year - pyear;
					}
				}
				if(age < 18){
					window.alert('Attention: Under 18!');
					valid=false;
					return valid;
				}
                          }

Code for body section:
Code:

Date of Birth: <br/>
	<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>

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.

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