Getting my date input to work?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
whizzkid-000
Forum Newbie
Posts: 8
Joined: Mon Jul 09, 2007 5:36 pm

Getting my date input to work?

Post by whizzkid-000 »

Hello all, i have recently started to learn php and build and on-line web application and i am having a few difficulties.

The first problem that i have is that when i go onto my 'add job form' i cannot get my date pop up to appear? im not entirely sure but i think it may have something to do with the quotes around it as the javascript code is set in a php script?

Neither the start date or end date work...The textbox and image for the calendar which i click on appear but nothing happens when i click the mini calendar?

Code: Select all

<? 
echo'<br/>
<div>
            <p class="addjob">Add Job Form</p>
            <form class="job_form" name="job_form" action="do_add_job.php" method="POST">
                <table class="data">
                    <tr>
                        <td>Job Name</td>
                        <td>
                            <input type="text" id="job_name" name="job_name" size="20"></td>
                            <td ALIGN=CENTER>
                        
                    <tr>
                        <td>Company Name</td>
                        <td>
 
                        <select name="Select Company Name">'; 
                        echo '<option value="">--Select Company Name--</option>'; 
                        while($opt = mysql_fetch_array($result)) 
                            { 
                        echo '<option value="' . $opt['company_name'] . '"></option>'; 
                            } 
                        echo'</select> 
 
                        $num
                        <td id="fnamev" class="vn"></td>';
                        
                        echo'<tr>
                        <td>Start Date</td>
                        <td>';
                        echo'<input type="text" id="start_date" name="start_date" size="10" )></input>
 
                        <a href="javascript&#058;NewCssCal(\'start_date\',\'ddmmyyyy\')"> 
                        <img src="sample/images/cal.gif" width="16" height="16" alt="Pick a date"></a>';    
                        
                        echo'</td>
                        
                        </tr>
 
                        <tr>
                        <td>End Date</td>
                        <td>
                        
                        <input type="text" id="end_date" name="end_date" size="10" )></input>
 
                        <a href="javascript&#058;NewCssCal(\'end_date\',\'ddmmyyyy\')"> 
                        <img src="sample/images/cal.gif" width="16" height="16" alt="Pick a date"></a>
                        
                        </td>
                        </tr>
                        
                    <tr>
                        <td>Contractor for this job</td>
                        <td>
                            <SELECT id="contractor" name="contractor" >
                            <option value="">--Select Contractor--</option>
                            <OPTION VALUE="james">James</OPTION>
                            <OPTION VALUE="james">John</OPTION>
                            <OPTION VALUE="jim">Jim</OPTION>
                            </SELECT>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Contracted Hours</td>
                        <td>
                            <input type="text" id="contracted_hours" name="contracted_hours" size="5" ></input>
                        </td>
                    </tr>
                    <tr>
                        
                        <td>Price</td>
                        <td>
                            <input type="text" id="job_price" name="job_price" size="10" ></input>
                        </td>
                    </tr>
                    
                    <tr>
                        
                        <td>VAT</td>
                        <td>
                        <input type="text" id="vat" name="vat" size="10" ></input>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Status</td>
                            <td>
                                <SELECT id="job_status" name="job_status">
                                    <option value="">--Select--</option>
                                    <OPTION VALUE="ns">Not Started</OPTION>
                                    <OPTION VALUE="o">Open</OPTION>
                                    <OPTION VALUE="c">Completed</OPTION>
                                </SELECT>
                            </td>
                    </tr>
                    
                    <tr>
                        <td>Cost of Job</td>
                        <td>
                            <input type="text" id="job_cost" name="job_cost" size="10" ></input>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Job Created By</td>
                        <td>
                            <SELECT id="created_by" name="created_by">
                                <option value="">--Select--</option>
                                <OPTION VALUE="john">John</OPTION>
                                <OPTION VALUE="jim">Jim</OPTION>
                                <OPTION VALUE="james">James</OPTION>
                            </SELECT>                       
                        </td>
                    </tr>
                    
                    <tr>
                        <td>Notes</td>
                        <td>
                            <TEXTAREA id="notes" name="notes"  rows=4 size="110")></TEXTAREA>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <button type="submit1">SUBMIT</button>
                            <class="spacer">
                        <td>
                    </tr>
                    
                </table>
                <br/>
            </form>
            </div>
        <html>
        <head>
        <link href="forms_css.css" rel="stylesheet" type="text/css"  />
        <script type="text/javascript" src="datetimepicker_css.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        </head>
        <body>
        </body>
        </html>';
                            
            ?>
Any help would be greatly appreciated
tech603
Forum Commoner
Posts: 84
Joined: Thu Mar 19, 2009 12:27 am

Re: Getting my date input to work?

Post by tech603 »

The dates are being called by java scripts. I would suggest using something like firefbug or the web developer plugins for firefox to help you identify where the errors are. Also i would suggest using the jquery datepicker as it is very easy to use, all you have to do is include the js, css file and set the id of your text box and it works like a charm. Here is the link for that

http://jqueryui.com/demos/datepicker/


Hope that helps
whizzkid-000
Forum Newbie
Posts: 8
Joined: Mon Jul 09, 2007 5:36 pm

Re: Getting my date input to work?

Post by whizzkid-000 »

tech603 wrote:The dates are being called by java scripts. I would suggest using something like firefbug or the web developer plugins for firefox to help you identify where the errors are. Also i would suggest using the jquery datepicker as it is very easy to use, all you have to do is include the js, css file and set the id of your text box and it works like a charm. Here is the link for that

http://jqueryui.com/demos/datepicker/


Hope that helps
Thanks for the reply... I have downloaded the jquery ui and have tried to implement it on my code and still get the same 'no fire up' of date pop up??? when i click on the boz nothing happens.... :banghead:

could you have a look at my code (mainly the quotes because i think this is the problem as it is a php page?)

Code: Select all

<? 
echo'<br/>
<div>
        
            <p class="addquote">Add Invoice Form</p>
            <form class="center" name="newq" action="do_add_invoice.php" method="post">
                <table class="data">
                    <tr>
                    
                    <script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker();
    });
    </script>
 
<div class="demo">
 
<p>Date: <input type="text" id="datepicker"></p>
 
</div><!-- End demo -->
                    <input type="text" name="date" id="date" />
                    $('#date').datepicker();
                        
                            if ($log_in = true){    
    $db_name = "";
    $table_name = "client";
    $connection = @mysql_connect("localhost", "", "") or die(mysql_error());
    $db = @mysql_select_db($db_name, $connection) or die(mysql_error());
    $sql = "SELECT company_name FROM $table_name";
    
    $result = @mysql_query($sql);
    $num    = mysql_num_rows($result); 
 
                     
                        echo'
                        <tr>
                        <td>Company Name</td>
                        WILL BE A SELCT
 
                        <td>
 
                        <select name="Select Company Name">'; 
                        echo '<option value="">--Select Company Name--</option>'; 
                        while($opt = mysql_fetch_array($result)) 
                            { 
                        echo '<option value="' . $opt['company_name'] . '"></option>'; 
                            } 
                        echo'</select>';
                            }
                    echo'</tr>
                    
                    <tr>    
                        <td>Net Amount</td>
                        <td>
                            <input type="text" id="net_amount" name="net_amount" size="5" )></input>
                        </td>
                        <td id="add1v" class="vn"></td>
                    </tr>
                    
                    <tr>
                        <td>Paid</td>
                        <td>
                            <input type="text" id="paid" name="paid" size="10" )></input>
                        </td>
                        <td id="add2v" class="vn"></td>
                    </tr>
                    
                    <tr>
                        <td>Outstanding Balance</td>
                        <td>
                            <TEXTAREA id="outstanding_balance" name="outstanding_balance" rows=5 size="106" )></TEXTAREA>
                        </td>
                        <td id="pcodev" class="vn"></td>
                    </tr>
                    <tr>
                        <td>Description</td>
                        <td>
                            <TEXTAREA id="description" name="description" rows=5 size="110")></TEXTAREA>
                        </td>
                        <td id="emailv" class="vn"></td>
                    </tr>
                                        
                    <tr>
                        <td>Job Name</td>
                        <td>
                                                WILL BE A SELCT
                            <SELECT id="job_name" name="job_name">
                            <option value="">--Select--</option>
                            <OPTION VALUE="">WILL SELECT JOB NAME</OPTION>
                            </SELECT>                       </td>
                        <td id="add2v" class="vn"></td>
                    </tr>
                    
                    <tr>
                        <td>Notes</td>
                        <td>
                            <TEXTAREA id="notes" name="notes"  rows=3 size="110")></TEXTAREA>
                        </td>
                        <td id="emailv" class="vn"></td>
                    </tr>
                    
                    <tr>
                        <td>
                            <button type="submit1">SUBMIT</button>
                            <class="spacer">
                        <td>
                    </tr>
            </table>
                <br/>
                
            </form>
            </div>
            
        <html>
        <head>
        <link href="forms_css.css" rel="stylesheet" type="text/css"  />
 
        
        <link type="text/css" href="css/themename/jquery-ui-1.7.custom.css" rel="Stylesheet" /> 
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
 
        </head>
        <body>
        </body>
        </html>';
            
            ?>
temidayo
Forum Contributor
Posts: 109
Joined: Fri May 23, 2008 6:17 am
Location: Nigeria

Re: Getting my date input to work?

Post by temidayo »

I don't think this problem has to do with PHP since you are including the javascript file
in the header of the page.

I've once had a problem with the initial script u mention(newCssCal). The javascript
seems to be having problem displaying properly in the browser. If you type
the url of the javascript file directly into your browser, you will see that the Javascript
will not display as plain text. It really beats me but I guess it has to do with some kind
of encoding.

A way around the problem is to copy the javascript out of the file and place in at the end
of your PHP file using <script> tag.

I don't know about jquery but might as well be the same problem.

I hope this helps.
Post Reply