Datepicker in multiple forms/same page - inst undefined error on second form

Datepicker in multiple forms/same page - inst undefined error on second form

Hi,

Trying to follow along with "

How to use multiple JQuery UI Date Picker or Datepicker in HTML or JSP page

The first input in the form "play" shows my custom datepicker calendar and works fine. ie. date is input using my custom datepicker calendar.

The succeeding inputs in the form "futuredates" show the generic datepicker calender and gives the error "inst is undefined line 974 jquery.ui.datepicker.js" .

Any help appreciated in solving this.

Thanks, R.

My code is:

  1.  <!DOCTYPE html >                
                     
    <html>
     
    <head>
     
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
     
    <title>Polly Bridge Log</title>
     
    <!-- ==========================  STYLES - See bridge/css  =============================== -->
     
    <link rel="stylesheet " type="text/css" href="css/bridge.css" />
    <link rel="stylesheet " type="text/css" href="css/show.css" />
     
    <!-- ========================  SCRIPTS 1 ============================= -->
     
        <link rel="stylesheet" href="../jquery-ui/development-bundle/themes/ui-lightness/jquery.ui.all.css">
         
        <script src="../jquery/jquery-2.1.1.js"></script> 
        <script src="../jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
        <script src="../jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>     
             
     <script type="text/javascript" src="../jquery/bridge.js"></script>

    </head> 
     
    <!-- ====================== HTML  ================================ -->
     
    <body>
     
    <div class="header">
        <h1 align="center" ><img src="../images/AmericanFlag2.png" alt="Company logo" height="80px" />Polly&rsquo;s Bridge Log </h1>
        <img src="../images/polly.png" alt="Polly"   align="center" height="130" width="131" />
        <hr size="3" width="80%" align="center" /><br />
    </div>
     
    <div id="when" align="center" >
         
        <form name="play" id="play" method="POST" action="#" >
     
            <p id="p1"> Date of Play?</p>
        <input type="text"  class="blue datepicker" name="datepick"  id="datepick"></input><br />
             
        </form>     
                         
    </div> <!-- id-when -->
     
     
    <div id="who">
     
    <form name="player" id="player" method="POST" action="#"> 
     
                     
        <input type="text"  hidden="hidden" id="id" name="id" size="6"></input>   
                      
        <label for="player" id="player">Player:</label>                 
        <input type="text" class="blue" name="player" size="20" id="player"></input><br /><br />
       
        <label for="phone" id="phone">Phone:</label>                 
        <input type="text" class="blue" name="phone" size="20" id="phone"></input><br /><br />
         
        <label for="score" id="score">Score:</label>       
        <input type="text" class="blue" name="score" size="5"  id="score"></input><br /><br />
         
    </form>
     
    </div> <!-- id-who-->           
         
        <form name="futuredates" id="futuredates" method="POST" action="#">
         
            <p id="p2"> Future Dates of Play?</p><br />
        <label for="date1" id="date1">Date1:</label>             
        <input type="text"  class="blue datepicker" name="date1"  id="date1"></input><br />
        <label for="date2" id="date2">Date2:</label>   
        <input type="text"  class="blue datepicker" name="date2"  id="date2"></input><br />
        <label for="date3" id="date3">Date3:</label>   
        <input type="text"  class="blue datepicker" name="date3"  id="date3"></input><br />
        <label for="date4" id="date4">Date4:</label>           
        <input type="text"  class="blue datepicker" name="date4"  id="date4"></input><br /><br /><br />
       
        <div id="controls">
       
        <button type="button" name="another"  class="controls hov"  id="another" >Another</button>&nbsp;&nbsp;&nbsp;
        <button type="button" name="done"  class=" controls hov"  id="done">Done</button>
         
        </div>
                 
        </form>   


    <!-- ========================  SCRIPTS 2 ============================= -->

    <script type="text/javascript" >

     $('#done').click(function ()  {location.href='bridgeFrontEnd.php'});
     $('#another').click(function ()  {location.href='bridgeConnect.html'});
     
    </script>
     
    </body>
     
    </html>