Jump to content

code not showing correct result

narjis

By narjis
in Javascript Help

 Share

Recommended Posts

narjis Regular Member

narjis

Posted
Posted

I'm just displaying an alert msg wonder why isn't iut working

Here is my code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User Validation Check</title>
<style>
input#textfield{
border-color:none;

/*border-style:none;*/}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="myJScript.js"></script>
</head>

<body>


<table width="435" border="1">
  <tr>
    <td colspan="2" align="center">  <strong>Registration Form</strong></td>
  </tr>
  
  <form id="form1" name="uForm" method="post" >
  <tr>
    <td width="118">User Name</td>
    <td width="301"><input type="text" name="userName" id="textfield" onfocus="outline();" /> <div id="uN"></div></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="userpass" id="textfield" onfocus="outline();"/><div id="uP"></div></td>
  </tr>
  <tr>
    <td>Re-type password</td>
    <td><input type="password" name="re-userpass" id="textfield" onfocus="outline();"/><div id="reUp"></div></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" name="email" id="textfield" onfocus="outline();"/><div id="email"></div></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="button" class="button" id="button" value="Register!" /></td>
  </tr>
  </form>
</table>

</body>
</html>

Here is script

$("#form1 tr td #button").click(function(){

alert("Hello");
});

Link to comment
Share on other sites
narjis Regular Member

narjis

Posted
  • Author
Posted

Here is my html code 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User Validation Check</title>
<style>
input#textfield{
border-color:none;

/*border-style:none;*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="myJScript.js"></script>
</head>

<body>


<table width="435" border="1">
  <tr>
    <td colspan="2" align="center">  <strong>Registration Form</strong></td>
  </tr>
  
  <form id="form1" name="uForm" method="post" >
  <tr>
    <td width="118">User Name</td>
    <td width="301"><input type="text" name="userName" id="textfield" onfocus="outline();" /> <div id="uN"></div></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="userpass" id="textfield" onfocus="outline();"/><div id="uP"></div></td>
  </tr>
  <tr>
    <td>Re-type password</td>
    <td><input type="password" name="re-userpass" id="textfield" onfocus="outline();"/><div id="reUp"></div></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" name="email" id="textfield" onfocus="outline();"/><div id="email"></div></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="button" class="button" id="button" value="Register!" /></td>
  </tr>
  </form>
</table>

</body>
</html>

I don't know what hard coded or embedded means

Link to comment
Share on other sites
goodacre.liam Newbie

goodacre.liam

Posted
Posted

Hey, here are a few pointers:

 

The reason your JavaScript doesn't seem to be executing properly is because it is assigning the click handler before the element exists!

One way to defer your code from executing until the DOM is ready (meaning that your element will have been loaded), is to use the following code:

//  Once the DOM is ready
jQuery(function ($) {
  //  Add a #button click event callback
  $('#button').click(function(){
    alert('Hello');
  });
});

 

The jQuery function accepts function expressions which it will execute when it detects the DOM has loaded.

 

An alternate way is to shift all your 'script' tags to the bottom of the body, so that the script will always execute after the element is loaded.  This would be my preferred method.

 

Another point is that you might want to start using html5 now.  This means we can get rid of the nasty doctype and replace it with:

<!doctype html>

 

Under this doctype, script tags no-longer need an explicit 'type' if they are JavaScript.  The convention is also to never attach JavaScript to elements as inline attributes:

<input onfocus="outline();" />

 

The outline function should be attached using JavaScript, similar to the way you wish to attach a click handler:

$('#form1 input:not([type=submit])').focus(outline);

 

One last point is that I think you have your form tag under an illegal parent (I could be wrong).  In your case, the form should wrap around the whole table.

 

Hope this helps.

Liam Goodacre

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.