Javascript/jquery - onclick of a button

Question

I'm stuck with a strange problem where a javascript function isn't getting invoked when I click on submit button(LOG IN) from inside a form.

<html>
    <head>
    <title></title>
    <script>
    $('#loginBtn').click(function () {
        $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
    });
    </script> 
    </head>
</html>

Is there anything different I should do here? I'm unable to figure this out. Please could I ask for help?

Hello Tung - Thankyou for jumping in. The first part of the problem where there was a typo is solved. The second part of the problem is $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />'); isn't replacing the button with the image that I want to. — usert4jju7
– usert4jju7, Commented Mar 25, 2016 at 2:51

Munawir · Accepted Answer · 2016-03-25 03:17:55Z

4

Remove the extra ) at the end of function hideBtn().

It should look like this

function hideBtn(){
  alert('hello');
};

<html>
    <head>
    <title></title>
    <link rel="stylesheet"  type="text/css"   href="app/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"  type="text/css"   href="app/js/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet"  type="text/css"   href="app/css/bootsnipLogin.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="app/js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="app/js/login.js"></script>
    <link rel="shortcut icon" href="app/image/favicon.ico" />

    </head>

    <body >
    <div class="container">
        <div class="card card-container">
        <br/>
        <center><img src="app/image/wd-logo.gif"></center>
        <br/><br/>
        <img id="profile-img" class="profile-img-card" src="app/image/avatar_2x.png" />
        <br/>
        <p id="profile-name" class="profile-name-card"></p> 
        <form class="form-signin" action="" method="post">
            <input  id="username" name="username"  placeholder="User Name"  class="form-control" required autofocus>
            <br/><br/><br/>
            <input  type="password"  id="password" name="password"  placeholder="Password" class="form-control" required >
            <br/><br/><br/>
            <div align="center">
            <span id = "errorspan"><?php echo $error; ?></span>
            </div>
            <br/><br/><br/>
            <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit" id="loginBtn">SIGN IN</button>
        </form><!-- /form -->
        </div><!-- /card-container -->
    </div><!-- /container -->   
          <script>
    $('#loginBtn').click(function(){
    //  alert('as');
        $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
    });
    </script> 
    </body> 
</html>

edited Mar 25, 2016 at 3:17

answered Mar 25, 2016 at 2:37

Munawir

3,3569 gold badges36 silver badges51 bronze badges

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

8 Comments

usert4jju7 Over a year ago

Hello Munawir - Thankyou for spotting the typo. Now that it works, I updated the code to replace the button with a GIF. However that doesn't seem to take effect. Would you have an idea about that please?

Munawir Over a year ago

$(this).html(); is a jquey not javascript

Munawir Over a year ago

You need to pass a reference to this in the JavaScript function call. eg: <button onClick="hideBtn(this)"></button> function hideBtn(thisEle){ thisEle.innerHTML = 'img tag here' ; }

usert4jju7 Over a year ago

I've updated the question to remove the onClick function. Instead using Jquery now. With Jquery, ` $('#loginBtn').click(function () { $(this).html('<img src="bba-reman.com/images/fbloader.gif" />'); });` - This doesn't work. Am I doing something wrong here? I did try replaceWith too. I'd like to understand what's the right way to do please.

Munawir Over a year ago

You need to link jquery like <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

|

Inpyo Jeon · Accepted Answer · 2016-03-25 02:41:36Z

2

There's an extra ');' in your script. Remove it and it will work.

function hideBtn(){
    //$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
    alert('hello');
}

edited Mar 25, 2016 at 2:41

answered Mar 25, 2016 at 2:41

Inpyo Jeon

2201 silver badge7 bronze badges

Comments

varad mayee · Accepted Answer · 2016-03-25 05:12:48Z

2

Remove the extra ) then your code will work properly like below

 function hideBtn()
    {
       alert('Hii');
    }

answered Mar 25, 2016 at 5:12

varad mayee

6197 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript/jquery - onclick of a button

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related