how to disable html button jquery

Question

I am trying to diable a button using jquery so user cant click the button multiple times but its not working the code lets me reclick the register button over and over and over ! I did my research and found solutions but can seem to get them to work for my scenario !

heres my javascript $(document).ready(function(){

 $('#button').click(function(e){

 $('#button').prop('disabled',true);


var setIt = 'set' ;
$.post("form.php",{pull_form: setIt},function(data){

        $('.msg').fadeOut('slow',function(){
          $(this).html(data);
          $('.red').hide();
          $('.all').hide();
          $('.red').fadeIn('slow');
          $('.all').fadeIn('slow');
        }).fadeIn('slow');




        $('.red').click(function(){
        $('.all').css('display','none') ;
          })

})


 e.preventDefault() ;
 })




}) ;

Heres my html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using GET</title>
    <link rel="stylesheet" href="css.css" media="screen" type="text/css">
  </head>
  <body>

<h1>Click the button to Register now</h1>
<button type="button" >

  <a id='button' href="register.php">Register</a>

</button>


<div class="msg">

</div>



<div class="msg2">

</div>

<div class="all">

<button type="button" class="red">X</button>

</div>
<script src='../jquery.js'></script>
<script type="text/javascript" src='custom.js'></script>

  </body>
</html>

heres the file my ajax is making a call to

    <?php

    if(isset($_POST['pull_form'])) {


      ?>
    <div class="all">
    <h2>Register</h2>




    <form class="" action="index.html" method="post">


      <input type="text" name="name" value="">
      <input type="text" name="password" value="">
      <input type="submit" name="submit" value="Submit">

    </form>

    </div>
    <?php
    }

     ?>

Take you <a id='button'... element out of the button element — Nikolay Ermakov
– Nikolay Ermakov, Commented Oct 20, 2016 at 3:32
I know. But the button wrapping around it still clicks visually. You can style you a element like a button or move link functionality to button element. One inside another is not good. — Nikolay Ermakov
– Nikolay Ermakov, Commented Oct 20, 2016 at 3:35

Razib Al Mamun · Accepted Answer · 2016-10-20 03:51:17Z

2

Firstly you can change your #button element. it is not a button. you can use only a tag.

and follow :

<form class="Myfrom" action="your_action_page.php" method="post">
      <input type="text" name="name" value="">
      <input type="text" name="password" value="">
      <input type="submit" id="submit-button" name="submit" value="Submit">
</form>

$(".Myfrom").on("submit", "#submit-button", function(e){
     e.preventDefault() ;
     $(this).prop('disabled',true);
});

edited Oct 20, 2016 at 3:51

answered Oct 20, 2016 at 3:41

Razib Al Mamun

2,7111 gold badge18 silver badges24 bronze badges

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

2 Comments

Markese P Over a year ago

Yea my html is poor , but this most definitely fixed it thanks

Markese P Over a year ago

I find it funny I spend all night coding the most difficult things , but cant get the simple things right lol

Rax Weber · Accepted Answer · 2016-10-20 03:33:46Z

0

Your #button is not a button, it's an a element. And to disable the a tag from redirecting you, you should set its href attribute to javascript: void(0).

answered Oct 20, 2016 at 3:33

Rax Weber

3,78121 silver badges30 bronze badges

3 Comments

willwolfram18 Over a year ago

you could also do <a href="#"> instead of javascript:void(0)

Markese P Over a year ago

I use preventDefault to stop it from redirecting me

Rax Weber Over a year ago

@Bwolfing you can still click it if you use that, and to prove it you can try, the link color changes.

SebCar · Accepted Answer · 2016-10-20 03:42:30Z

0

You need to take a look at this: https://api.jquery.com/Ajax_Events/ A small example: http://pastebin.com/jAKiZqE6 Don't worry about the event on the button, control the submit form event. Also you could try to put your php post code in a different file, without HTML.

answered Oct 20, 2016 at 3:42

SebCar

3383 silver badges12 bronze badges

Collectives™ on Stack Overflow

how to disable html button jquery

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related