code not showing correct result

narjis · December 31, 2011

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");
});

AyKay47 · December 31, 2011

Your selector is incorrect, if you are using an element with a unique id, you do not need to tree your selector.

$("#button").click(function(){
      alert("hello");
});

narjis · December 31, 2011

Still not working

AyKay47 · December 31, 2011

Hmm,

How is the HTML introduced in the page? Is it hard coded or injected?

narjis · December 31, 2011

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

AyKay47 · December 31, 2011

Your HTML is hard coded so this should be a simple task. make sure that your paths are correct to the external JavaScript file. Also, you should be using firebug to debug your js code, or chrome developer tools.

goodacre.liam · January 1, 2012

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

narjis · January 1, 2012

Thank you your reply surely helped me.

Sign In

code not showing correct result

Recommended Posts

narjis

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

narjis

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

narjis

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

goodacre.liam

Link to comment

Share on other sites

narjis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information