Get jQuery function to trigger on HTML Button OnClick

Question

I have the following HTML/JQuery:

<!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>Login</title>
<script src="jQuery.js"></script>
<script>
   $(document).ready(function(){                     
      $(function(){
         $("#sb").click(function(e){
            e.preventDefault();
            getmessage = "Yes";
            getmessage = encodeURIComponent(getmessage);//url encodes data
            $.ajax({
               type: "POST",
               url: "get_login.php",
               data: {'getmessage': getmessage},
               dataType: "json",
               success: function(data) {
                  $("#message_ajax").html("<div class='successMessage'>" + data.message +"</div>");
           }
           });
        });
      });
    });
</script>
</head>

<body>
<h1>Login</h1>
<p>Please enter your e-mail and password</p>
<form name = "loginform" action = "http://dev.speechlink.co.uk/David/get_login.php" method = "post">
<p>E-mail<input name = "username" type="text" size="25"/><label id ="emailStatus"></label></p>

<p>Password<input name = "password" type="text" size="25"/><label id ="passwordStatus"></label></p>

<p><input type="hidden" name="usertype" value = "SupportStaff" /></p>
<p>><input type ="button" id = "sb"value="Create Account"/></p>

</form>
<div id = "message_ajax"></div>
</body>
</html>

I cannot get the event handler (within the jQuery) to trigger upon the user pressing the 'Create Account' button...

You really ought to remove all those irregular spaces from attributes. Also $(function() { inside a .ready is superfluous as it does the same thing. — pimvdb
– pimvdb, Commented Aug 15, 2011 at 12:18
Knowing what actually happens when you click the button would be useful; there's a quite substantial difference between nothing visibly happening and nothing actually happening. Do you get any browser errors? Do you get a response from the AJAX call? Does the event actually fire? — Anthony Grist
– Anthony Grist, Commented Aug 15, 2011 at 12:19
The HTML for your button seems to have extra spaces at somes place, and missing space between "sb" value="Create Account". That might be it. Also, why are you embeding $(function(){ into $(document).ready... your code already gets called only on DOM ready. — MaxiWheat
– MaxiWheat, Commented Aug 15, 2011 at 12:20

T.J. Crowder · Accepted Answer · 2011-08-15 12:25:13Z

3

I see three issues off-the-bat:

You're calling ready twice (when you pass a function into $(), it's just like passing a function into $(document).ready()). This is largely harmless, but completely unnecessary.
Your attribute for the id on the button is rammed up against the next; it's possible the browser is ignoring it:
```
<input type ="button" id = "sb"value="Create Account"/>

```
(It's fine to have spaces around the = if you want, but having the "sb" rammed up into value may not work.)
(Possibly off-topic, possibly not): You seem (from the quoted code) to be falling prey to The Horror of Implicit Globals. You should probably declare your getmessage variable.

So:

<script>
   $(document).ready(function(){           
     // Removed the unnecessary `$(function() { ...` here and the matching closing bits at the end
     $("#sb").click(function(e){
        e.preventDefault();
        var getmessage = "Yes"; // <== Added `var`
        getmessage = encodeURIComponent(getmessage);//url encodes data
        $.ajax({
           type: "POST",
           url: "get_login.php",
           data: {'getmessage': getmessage},
           dataType: "json",
           success: function(data) {
              $("#message_ajax").html("<div class='successMessage'>" + data.message +"</div>");
       }
       });
    });
    });
</script>

and

<input type="button" id="sb" value="Create Account"/>

edited Aug 15, 2011 at 12:25

answered Aug 15, 2011 at 12:20

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthony Grist Over a year ago

I tested having the id and value attributes without a space in IE9, FF5 and Chrome 12 and it worked fine in all three. It's possible it's not working with earlier versions of these browsers, but I imagine it's not the only issue with what he's written.

T.J. Crowder Over a year ago

@Anthony: I imagine not. I seem to recall it working as well when I saw it in some code a couple of years back.

LeftyX · Accepted Answer · 2012-08-30 14:53:32Z

2

You html is not good:

<p>><input type ="button" id = "sb" value="Create Account"/></p>

should be

<p><input type ="button" id="sb" value="Create Account"/></p>

edited Aug 30, 2012 at 14:53

LeftyX

35.6k21 gold badges140 silver badges201 bronze badges

answered Aug 15, 2011 at 12:18

JohnJohnGa

15.7k20 gold badges65 silver badges88 bronze badges

Collectives™ on Stack Overflow

Get jQuery function to trigger on HTML Button OnClick

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related