Markese P Markese P - 1 month ago 9
HTML Question

how to disable html button jquery

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
}

?>

Answer

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