Calendary / jquery / blur event?

Calendary / jquery / blur event?

OK, I'm really confused and could use some help here. I am working on a form where users enter a Start Date and an End Date via a pop up calendar using JavaScript. This works well. From the results of that data, I need to 1) calculate the number of days + 1; 2) multiply #1 by $25 to get the amount allocated for meals - and I need it done dynamically. Now, I can get this to work using onblur in the two input fields for the dates, but that means users would HAVE to put the focus within the INPUT fields AFTER they've done the calendars and tab or click else where in order for the values to take effect and the javascript to calculate the correct values for meal. It was suggested to try to use jquery, which I have been trying to no avail and I'm just wondering if I am doing this wrong. I thought .trigger or .triggerHandle would do it, but nothing seems to happen. Here's my script I'm trying to use to activate these scripts:

  1.         <script type="text/javascript">
  2.             $("#en_date").blur(function() {
  3.                 $("#input25").triggerHandler("blur");
  4.             });
  5.             $("#input25").blur(function() {
  6.                 $("#en_date").trigger("blur");
  7.             }
  8.         </script>   
My input fields have this:

  1. <br /><b>* Start date - </b>
  2. <input type="text" id="st_date" name="st_date" maxlength="25" size="25" value="<?php echo $st_date; ?>" onblur="cal7();" />
  3. <a href="#" onClick="cal13.select(document.forms[0].st_date,'st_date','yyyy-MM-dd'); return false;" TITLE="cal13.select(document.forms[0].st_date,'st_date','yyyy-MM-dd'); return false;" NAME="st_date" ID="st_date">
  4. <img src="images/cal.gif" border="0" width="16" height="16" alt="Pick a date" />
  5. </a><br />
  6. <b>* End date - </b>
  7. <input type="text" id="en_date" name="en_date" maxlength="25" size="25" value="<?php echo $en_date; ?>" onblur="cal7();" />
  8. <a href="#" onClick="cal13.select(document.forms[0].en_date,'en_date','yyyy-MM-dd',(document.forms[0].en_date.value=='')?document.forms[0].st_date.value:null); return false;" TITLE="cal13.select(document.forms[0].en_date,'en_date','yyyy-MM-dd',(document.forms[0].en_date.value=='')?document.forms[0].st_date.value:null); return false;" NAME="en_date" ID="en_date">
  9. <img src="images/cal.gif" border="0" width="16" height="16" alt="Pick a date" /></a></p>

The End Date is tied to the Start Date, as you can tell above. For the calendar, I am making it launch with this command:

  1.   <SCRIPT LANGUAGE="JavaScript" ID="js13">
  2.     var cal13 = new CalendarPopup();
  3.   </SCRIPT>

I've tried just using a simple if/then statement within my javascript that calculates the values, but it doesn't launch automatically, which is my problem, and it should launch immediate after the "End Date" variable has been entered. Everything else works. Any advice or guidance would be greatly appreciated. Thank you!