javascript - 我如何禁用/启用提交按钮
问题描述
我正在使用 Django 开发一个项目。我在主页上有 3 个帖子,每个帖子都有一个带有提交按钮的评论表单。如果 textarea 中没有文本,我如何禁用提交按钮,并且当 textarea 中有文本时,提交按钮将被启用,提交表单后,提交按钮将被禁用。当我提交表单时,我的评论保存在数据库中,我尝试使用这个http://jsfiddle.net/mehdi354/c3wyh761/14/它有效,但我的评论没有保存在数据库中。我该如何解决这个问题?
形式:
<span class="md-form">
<form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">
{% csrf_token %}
<input type="hidden" value={{post.id}} name="post_comment">
<textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>
<button type="submit" class="submit" id="submit1-{{post.id}}" disabled>button</button>
</form>
</span>
Ajax 表单提交:
<script>
$(document).on('submit', '.feeds-form', function(event){
event.preventDefault();
var pk = $(this).attr('value');
console.log($(this).serialize());
$.ajax({
type: 'POST',
url: "{% url 'site:home' %}",
headers: { 'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val() },
data: $(this).serialize(),
dataType: 'json',
success: function(response) {
$('#newfeeds-form'+pk).html(response['form']);
$('textarea').val('');
//console.log($('#newfeeds-form'+pk).html(response['form']));
},
error: function(rs, e) {
console.log(rs.resopnseText);
},
});
});
</script>
Jquery禁用/启用按钮:
$(document).on("keydown",".textinput",function(){
let buttons = $(this).closest("form").find(".submit")
if($(this).val() == "") {
buttons.attr("disabled",true);
}
else{
buttons.attr("disabled",false);
}
$(document).on("click",".submit",function(e){
$(this).closest("form").trigger("reset");;
$(this).attr("disabled",true);
});
});
</script>
解决方案
我会用beforeSend
andcomplete
方法解决它。您可以在此处找到有关它的信息
$(document).ready(function() {
$('.feeds-form').on('submit', onSubmitFeedsForm);
$('.feeds-form .textinput').on({
'keyup': onKeyUpTextInput,
'change': onKeyUpTextInput // if another jquery code changes the value of the input
});
function onKeyUpTextInput(event) {
var textInput = $(event.target);
textInput.parent().find('.submit').attr('disabled', textInput.val() == '');
}
function onSubmitFeedsForm(event) {
event.preventDefault();
// if you need to use elements more than once try to keep it in variables
var form = $(event.target);
var textInput = form.find('.textinput');
var hiddenField = form.find('input[name="post_comment"]');
$.ajax({
type: 'POST',
url: "{% url 'site:home' %}",
// use the variable of the "form" here
data: form.serialize(),
dataType: 'json',
beforeSend: function() {
// beforeSend will be executed before the request is sent
form.find('.submit').attr('disabled', true);
},
success: function(response) {
// as a hint: since you get a json formatted response you should better us "response.form" instead of response['form']
$('#newfeeds-form' + hiddenField.val()).html(response.form);
// do you really want to reset all textarea on the whole page? $('textarea').val('');
textInput.val(''); // this will trigger the "change" event automatically
},
error: function(rs, e) {
console.log(rs.resopnseText);
},
complete: function() {
// this will be executed after "success" and "error"
// depending on what you want to do, you can use this in the "error" function instead of here
// because the "success" function will trigger the "change" event automatically
textInput.trigger('change');
}
});
}
});
.feeds-form .submit[disabled] {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="md-form">
<form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">
<!-- {% csrf_token %} -->
<input type="hidden" value={{post.id}} name="post_comment">
<textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>
<button type="submit" class="submit" id="submit1-{{post.id}}" disabled="disabled"><i class="fas fa-paper-plane"></i> Submit</button>
</form>
</span>
<span class="md-form">
<form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">
<!-- {% csrf_token %} -->
<input type="hidden" value={{post.id}} name="post_comment">
<textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>
<button type="submit" class="submit" id="submit1-{{post.id}}" disabled="disabled"><i class="fas fa-paper-plane"></i> Submit</button>
</form>
</span>
推荐阅读
- swift - StackView 尾随边距设置为 layout.trailing 不起作用
- java - 当方法已经以 LIFO 方式堆叠时,为什么线程有指令指针?
- c++ - 那么......有没有办法阻止文件自动清除?(c++)
- python-3.x - python3 manage.py runserver 在不指定本地主机的情况下不起作用
- python - PyQt 创建跟随鼠标的标签
- python - 优先折叠数据框列
- swift - Subscription call 2 times, how to unsubscribe observable in RxSwift
- php - 使用 Symfony 路由的 MVC 路由
- python - 如何生成给定长度的所有可能组合
- python-requests - 使用 httpx 异步客户端和坚韧的最佳方式?