Page 1 of 1

[SOLVED] Please help - No error but code not working

Posted: Sat Sep 04, 2010 9:11 am
by Bbob
Hi I have a jQuery thats not working. Its suppose to display a value in the div "error" but nothings showing up.

Content of checklogin.php is just "hello" - just for error checking

Here's the code

Code: Select all



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
        <title>HP - Login</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="../css/style.css" rel="stylesheet" type="text/css" />
    </head>
        
        <!-- Javascript -->
        <script type = "text/javascript" src="jquery.js"> </script>
        <script type = "text/javascript">
        
        
            function checklogin() {
            $.post( 'checklogin.php', {username: form.username.value},
                function(error) {
                    $('#error').html(error).show()
                
            });
        }
    
        </script>
    <body>
 
        <div id="wrap">
 
            <div id="header">
                <div id="logo">
                    <h1 id="sitename">H<span class="green">P</span></h1>
                    <h2 class="description"></h2>
                </div>
                
                <div id="headercontent"></div>
                
                <div id="sitecption">
                    Welcome
                    <span class="bigger">Guest</span>
                </div>
            </div>
        
            <div id="main">
            
                <div id="menus">
            
                    <div id="mainmenu">
                        <ul>
                            <li class="first"><a href="home.php">Home</a></li>
                            <li id="active"><a href="login.php">Log In</a></li>
                            <li><a href="about.php">About</a></li>
                            <li><a href="services.php">Services</a></li>
                            <li><a href="contact.php">Contact</a></li>
                        </ul>
                    </div>
                
            
                </div>
 
                <div id="content">
 
                    <div id="homeleft">
                        
                        <form name="login">
                            
                            <table width="480" border="0">
                                 
                                  <tr>
                                    <th scope="col"><h2>User<span class="green">name</span></h2></th>
                                    <td scope="col"><input type="text" name="username" /></th>
                                  </tr>
                                  
                                  <tr>
                                    <th><h2>Pass<span class="green">word</span></h2></td>
                                    <td><input type="password" name="password"/></td>
                                  </tr>
                                  
                                  <tr>
                                    <td colspan="2"> <div id = "error" > </div> </td>  -  this is where the error or text from checklogin should show up.
                                  </tr>
                                  
                                  <tr>
                                    <th></td>
                                    
                                    <td>
                                        <p>&nbsp;</p>
                                        <input type="button" value="Submit" onClick="checklogin();"/>
                                    </td>
                                    
                                  </tr>
                           </table>
                         </form> 
                    </div>
 
                    <div id="homeright">
                
                    </div>
                
                    <div class="clear"></div>
 
                </div>
            
            </div>
            
            <div id="footer">
                
            </div>
            
        </div>
 
    </body>
 
</html>


Re: Please help - No error but code not working

Posted: Sat Sep 04, 2010 4:20 pm
by McInfo
If you use Firefox, get the Firebug extension.
Firebug Console wrote:form is not defined
$.post( 'checklogin.php', {username: form.username.value},
Also, some of the <td>s and <th>s are mixed up in the table.

Re: Please help - No error but code not working

Posted: Sat Sep 04, 2010 8:40 pm
by Bbob
Hi thanks for the reply


Ive changed the code, replace "form" with the "login" form and fixed the th / td mix up but it still doesnt work.

Ive also download and install Firebug...but dont know how to use.

Re: Please help - No error but code not working

Posted: Sat Sep 04, 2010 9:07 pm
by califdon
With Firebug installed in FireFox browser, any time you're looking at a web page, look over at the upper right corner and you should see 3 green checkmarks, but if one of them turns red and has an exclamation point, click on it to reveal CSS and Javascript errors. You can also click Tools -> Firebug -> Open Firebug (or just press F12) to open the analysis panel at the bottom. If you're going to write web pages, you need to learn how to use Firebug.

Re: Please help - No error but code not working

Posted: Sat Sep 04, 2010 10:47 pm
by Bbob
Hi

Thanks McInfo & califdon for the replies.

I manage to get it to work but I dont know how :lol:

I think it was because of a corrupt download of jQuery - Ive download this 10 times, 10th time worked :crazy:


BTW

Are there alternative to Firebug? I usually use Chrome. Is there a software similar to Firebug but independent from web browser?
Likewise, do you guys know any software that can debug Javascript/jQuery Code? Like jCreator for Java.

Re: [SOLVED] Please help - No error but code not working

Posted: Sat Sep 04, 2010 11:08 pm
by McInfo
The Firefox version of Firebug does JavaScript debugging.

There is Firebug Lite for Chrome, but it's not as complete as the Firefox version (according to the website). You might investigate Chrome Developer Tools. I have used neither.

To make better use of jQuery in your script, use this code to get the user name:
$("input[name='username']").first().val()

Note: I would have put the code snippet into syntax blocks, but the square brackets are not compatible.