我正在尝试使用ajax(带有jquery)调用php脚本时将按钮的状态更改为禁用。我将所有信息发送到数据库中并获得返回,但无法执行ajaxStart。我该如何解决更改按钮状态的问题?
这是代码:
HTML和JAVASCRIPT
$(document).ready(function() {
// $("#load").hide();
var name;
var age;
var post
$(".formulaire").submit(function() {
name = $("#name").val();
age = $("#age").val();
post = $("#post").val();
$.post('sequence.php', {
u_name: name,
age: age,
post: post
}, dats);
$("#bouton").ajaxStart(function() { // Nous ciblons l'élément #loading qui est caché
$("#bouton").attr('disabled', 'disabled');
console.log("*********");
});
return false;
function dats(data) {
$("#div1").html(data);
$("#name").val("");
$("#age").val("");
$("#post").val("");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the-form" style="width:45%;margin:auto;">
<form class="form-group formulaire" method="POST">
<input type="text" name="u_name" id="name" class="form-control" placeholder="Your name">
<input type="text" name="age" id="age" class="form-control" placeholder="your age">
<textarea name="post" cols="30" id="post" rows="10" class="form-control"></textarea>
<button class="btn btn-info btn-md" id="bouton" type="submit">submit</button>
</form>
</div>
最佳答案
这是示例代码:
$(document).ready(function () {
var name, age, post;
$(".formulaire").submit(function (event) {
event.preventDefault();
name = $("#name").val();
age = $("#age").val();
post = $("#post").val();
$("#bouton").attr('disabled','disabled');
$.post('sequence.php',
{
u_name: name,
age: age,
post: post
}, function (data) {
$("#div1").html(data);
$("#name").val("");
$("#age").val("");
$("#post").val("");
$("#bouton").removeAttr('disabled');
}
);
});
});