CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-mobile
PPD
PPD

Reputation: 5890

on click of button color is not changed

I have following html code I want to change color of button onclick. I use $("#submitButton").css("background-color","yellow"); But it does not change on click.

Here is my html code

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />


<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>

<script type="text/javascript">

            $( document ).bind( "mobileinit", function()
            {
                console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$");
                $.mobile.pushStateEnabled = false;
                $.mobile.defaultTransition = 'slideup';
            });

        </script>

<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>

</head>
        <body>



        <div data-role="page">

        <div data-role="header">
        <h1>Form Page</h1>
        </div><!-- /header -->

            <div data-role="content">   
            <form id="loginForm">

        <!--    Wrap Inputs in fieldcontain which will sort out borders and padding, can cause layout to break  -->
        <div data-role="fieldcontain">
        <label for="firstName"> Username: </label>
        <input type="text" name="username" value="" id="username" /> <!--   Use id and name values -->
        </div>  

        <div data-role="fieldcontain">
        <label for="password"> Password: </label>
        <input type="password" name="password" value="" id="password" /> <!--   Use id and name values -->
        </div>  

        <div data-role="fieldcontain">
        <label for="dob"> Date of birth: </label>
        <input type="password" name="dob" value="" id="dob" /> <!-- Use id and name values -->
        </div> 


        <div data-role="button">
        <input type="submit" data-role="button" value="Login" id="submitButton">
        </div>

        </form> 
        </div>

        <div data-role="footer">
        <h4>Footer content</h4>
        </div><!-- /footer -->

        </div>  



        <script type="text/javascript">

            $(function()
            {
                $('#submitButton').on('click', function(e)
                {
                    e.preventDefault();
                    $(this).css("background-color","yellow");
                    handleLogin();
                });
            });


        </script>   



        </body>
</html>

On click of submit button it call handleLogin() function but color is not changed. Any help will be appreciated.

Upvotes: 0

Views: 2723

Answers (6)

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Your $('#submitButton').click(function() should be inside:

$(function() {
  /*Your function*/
})

OR

$(document).ready(function() {
/*Your function*/
})

OR

$(window).load(function() {
/*Your function*/
})

Upvotes: 0

adeneo
adeneo

Reputation: 318212

$(function() {
    $('#submitButton').on('click', function(e) {
        e.preventDefault();
        $(this).css("background-color","yellow");
        handleLogin();
    });
});

Prevent the form from refreshing the page, put your code inside document.ready (the $(function() {..code here..}); ), and remember to include jQuery.

FIDDLE

EDIT:

If the new code posted is your entire file, you don't have a handleLogin function (unless it's in an external file) ???

Open the console in your browser (F12) and check if there are any errors.

Upvotes: 1

aneeshraj
aneeshraj

Reputation: 101

try the code in document.ready

$(document).ready(function(){ $('#submitButton').click(function () { $("#submitButton").css("background-color", "yellow"); handleLogin(); }); })

Upvotes: 0

demix
demix

Reputation: 76

First, you haven't include jquery...

Second, you can add return false; in your event callback, otherwise the page will refresh and you won't see anything.

Upvotes: 0

Ivan
Ivan

Reputation: 10372

Is jQuery included properly? Because it works for me in my jsFiddle. http://jsfiddle.net/jnaHB/

Perhaps the page is refreshing when the request is submitted?

Upvotes: 1

Arun Jain
Arun Jain

Reputation: 5464

You are using a submit button. That's why clicking on submit button it may refreshes the page due to the form submission. You can use the form onSubmit event rather than on button click. And also if you want to see the background color than use "return false;" in your function, otherwise it will again submit the form.

Upvotes: 0

Related Questions