I'm working with this form which has js calendar. unfortunately, I can't get the calendar to work onclick. It produces the following error:

Uncaught SyntaxError: Unexpected token

can't make out the error. Not sure if this is related to another onclick function. Here is the actual code:

<form name='PaymentForm' onsubmit='return ValidatePaymentForm();' action='updatebalancedue.php' method='post'>
<input type=\"hidden\" name=\"edit_sel_id\" value=\"$sel_id\">

<div id=\'pmt_header\'><center><table class=\'tablestyle2\' width=90% cellpadding=2 cellspacing=0>
<tr valign='top'>
	<td style=\'border:1px solid #cccccc;\' width=\"28%\" align=\"justify\">
<table class=\'tablestyle_inner\' width=\"170\">
<tr>
</td>
</tr>
<tr><td bgcolor='#000000'><font color='#FFFFFF' class='label'>Payment Received Date:</td>
</tr>
</table>
<input type='text' value='$date' readonly name='theDate' size='11'><input type='button' class='NonPrintable' value='Calendar' onclick='displayCalendar(this.form.theDate,'yyyy/mm/dd',this)'></td>

<td style='border:1px solid #cccccc;' width=\"35%\">
<table class='tablestyle_inner' width='607'>
<tr><td valign='top'class='label' width='110'>Date of Invoice</td>
	<td width='196'><span id='_PayType_sel'><input name='$date_on_invoice' value='$date_on_invoice' disabled='true' style='float: left' valign='top'></td>
	<td valign='top' width='106'>Client ID:	</td><td valign='top'>
<input name='$clientID' value='$clientID' disabled='true' style='float: left'></span></td>
<tr><td class='label' width='110'>First Name:</td><td width='196'><input  type='text'  size='22' maxlength='50' value='$firstname' disabled='true' style='float: left'></td><td valign='top'>Last Name:</td><td valign='top'><input  type='text'  size='22' maxlength='50' value='$lastname' disabled='true' name='T1' style='float: left'></td>
</tr>
</table>
</td>
<td style='border:1px solid #cccccc;' width='35%' align='right'>
<table class='tablestyle_inner'>
<tr><td bgcolor='#000000'><font color='#FFFFFF' class='label' align='left'>New Bal.:</td></tr><tr><td><input name='dollarsymbol3' size='1' readonly style='border:0px;' value='$'><input id='amount' name='newbalance' readonly style='color: #EE0000' size='8' maxlength='16' value='0.00'> <!--<input type='text' name='newbalance' disabled='true' size='16' maxlength=\"18\" value='$0.00'--></td>
</tr>
</table>

<td style='border:1px solid #cccccc;' width='35%' align='right'>
<table class='tablestyle_inner'>
<tr><td bgcolor='#000000'><font color='#FFFFFF' class='label' align=\"left\">Payment Reference:</td></tr><tr><td><input type='text' name='paymentref'  size='16' maxlength='18' value='$RNO'</td>
</tr>
</table>

</table></center>
<br></div>
<div id='items_table'><center>
	<table class='tablestyle' colspan=7 width='89%' cellpadding=2 cellspacing=0>
<tr>
<td style='border:1px solid #cccccc;' width=' 15%' class='tableheader' bgcolor='#000000'><font color='#FFFFFF'> Invoice Number</td>
<td align='center' style='border: 1px solid #cccccc;' width=' 15%' class='tableheader' bgcolor='#000000'><font color='#FFFFFF'>Service Description</td>
<td style='border: 1px solid #cccccc;' width=' 15%' class='tableheader' bgcolor='#000000'><font color='#FFFFFF'>Balance Due</td>
<td style='border: 1px solid #cccccc;' width=' 15%' class='tableheader' bgcolor='#000000'><font color='#FFFFFF'>Payment</td>
<td style='border: 1px solid #cccccc;' width=' 15%' style='border:1px solid #cccccc;' width=' 15%'class='tableheader' bgcolor='#000000'><font color='#FFFFFF'>Payment Type</td>
</tr>
<tr>
<td valign='top' style='border-left: 0px solid #cccccc;' width=' 15%'><input  type='text' name='$invoicenum' disabled='true' size='12' maxlength='10' value='$invoicenum' class='combo3' rel='code_id' title=''>
</td><td valign='top' style='border-right: 0px solid #cccccc;' width=' 15%' ><span id='_code_id_sel'>
<!-- the line below serves to auto adjust the textarea box in accordance with the box's content. The class allows the box to expend to 1000 this works with two files jquery.textarea-expander.js and jquery-1.3.2.min.js -->
<textarea name='mytextarea' id='mytextarea' rows='3' cols='60' disabled='true'class='expand10-100'>$servicedesc</textarea>
<!--<textarea name='servicedesc' cols='30' rows='2' disabled='true'  >$servicedesc</textarea></span>-->
</td>
<input type=\"hidden\" name=\"dimension2_id\" value=\"0\">
<td valign='top' style='border-left: 0px solid #cccccc;' width=' 15%' align='left'> <input name='dollarsymbol2' size='1' readonly style='border:0px;' value='$'><input id='amount' name='balance' size='12' disabled='true' value='$new_bal' onChange='updatesum()'> <!--<input class='amount' type=\"text\" name='balance' disabled='true' size=\"15\" maxlength=\"15\" dec=\"2\" value='$Balancedue'>--></td>
<td valign='top' style='border-left: 0px solid #cccccc;' width=' 15%' align='left'> <input name='dollarsymbol1' size='1' readonly style='border:0px;' value='$'><input id='amount' name='paymentamount' size='12' style='color: #71C671' value='0.00' onChange='updatesum()'></td>
<td valign='top' style='border-left: 0px solid #cccccc;' width=' 15%' ><span<select autocomplete='on'  name='paymenttype' ><OPTION>Select One
						<OPTION>Cash
						<OPTION>Check
						<OPTION>Visa
						<OPTION>Master Card
						<OPTION>AMEX
						<OPTION>Discover
						<OPTION>Other
</select></span></td>
</tr>
</table></center>
</div>
<br><table align='center'><tr><td >Memo</td><td><textarea STYLE='display:inline' name='memo' cols='50' rows='3'></textarea></td>
</tr>
</table>
  <br><br><center><input type='button'  class='NonPrintable' value='Select Another Record' ONCLICK='history.go(-1)'> &nbsp;&nbsp;&nbsp;&nbsp;<input type='submit' name='submit' class='NonPrintable' value='Record Payment'>&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' class='NonPrintable' onClick='window.print()' value='Print' />
</center>
</p>
</form>";

I'm using the form within a php code.

This is my script section:

<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery.textarea-expander.js"></script>


<script>
function ValidatePaymentForm()
{    
var paymentamount = document.PaymentForm.paymentamount; 
var paymenttype = document.PaymentForm.paymenttype;   
if (paymentamount.value == "0.00")    
{        
window.alert("Sorry, no Payment Amount is indicated!");        
paymentamount.focus();        
return false;    
} 

if (paymenttype.value == "Select One")    
{        
window.alert("Indicate form of payment!");        
paymenttype.focus();        
return false;    
} 

return true;
}

</script>

<!--script for calendar begins-->
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar.js?random=20060118"></script>
<!--script for calendar ends-->

The calendar code is highlighted in red.
any assistance is appreciated!

I got the issue resolved! The problem was with my quotation here:

onclick="displayCalendar(this.form.theDate,'yyyy/mm/dd',this)"

Initially, I had used single quotes--changing it to double quotes resolved the issue.

...suggestion courtesy of another "forumer"...

Best
Mossa

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.