使用jquery函数隐藏提交按钮不起作用？

Question

我创建了一个 django 脆皮表单。我想隐藏提交按钮，直到输入每个字段为止，我找到了一些使用 jQuery 的解决方案，但在输入每个字段后它没有显示提交按钮，我需要您的帮助才能进一步进行。

我添加了两张图片， 在隐藏提交按钮并尝试 jquery 之前，

尝试jquery后，即使输入每个字段后，提交按钮也不可见。

下面是我的各个文件的代码，

表格.py

class AppForm(forms.ModelForm):
    
        class Meta:
            model = App
            fields = ('__all__')

        def __init__(self, *args, **kwargs):
            super(AppForm, self).__init__(*args, **kwargs)
            self.helper = FormHelper()
            self.helper.form_show_labels = False

            defualt_image_path = '/media/photo.png'
            self.fields['appicon'].widget.attrs['placeholder'] = defualt_image_path
            self.fields['appicon'].widget.attrs['classs']= 'appicon-field'
            self.fields['appname'].widget.attrs.update({'placeholder': 'Apps Name', 'class':'appname-field'})
            self.fields['link'].widget.attrs.update({'placeholder':'App Link','class':'link-field'})
            self.fields['category'].widget.attrs.update({'placeholder':'App Category', 'class': 'catg-field'})
            self.fields['subcategory'].widget.attrs.update({'placeholder':'Sub Category', 'class': 'subcatg-field'})
            self.fields['points'].widget.attrs.update({'placeholder':'ADD POINTS', 'class': 'points-field'})

$(document).ready(function() {
  // Function to check if all fields are filled
  function checkFields() {
    var imageInput = $('.appicon-field')[0].files.length > 0;
    var charInput1 = $('.appname-field').val().trim() !== '';
    var charInput2 = $('.link-field').val().trim() !== '';
    var charInput3 = $('.catg-field').val().trim() !== '';
    var charInput4 = $('.subcatg-field').val().trim() !== '';
    var charInput5 = $('.points-field').val().trim() !== '';

    // Show/hide submit button based on input status
    document.querySelector('.submitform-button').style.display = imageInput && charInput1 && charInput2 && charInput3 && charInput4 && charInput5 ? 'inline-block' : 'none';
  }

  // Trigger checkFields on input change
  $('.appicon-field, .appname-field, .link field, .catg-field, .subcatg-field, .points-field').on('change', function() {
    checkFields();
  });

  // Initial check on page load
  checkFields();
});

.submitform-button {
  display: none;
  padding: 10px 75px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: #f3c19d;
  color: #293845;
  border: 2px solid #ec975b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="submit-div">
  <button type="submit" class="submitform-button" id="submitform-button">Submit</button>
</div>

Answer 1

我已经审查了您的问题，即即使输入所有字段后，jQuery 函数也不会在 Django 脆皮表单中显示提交按钮。看来问题可能出在

checkFields

函数的设置方式及其触发方式上。

这是 jQuery 脚本的修订版本，应该可以工作：

$(document).ready(function() {
    // Function to check if all fields are filled
    function checkFields() {
        var imageInput = $('.appicon-field')[0].files.length > 0;
        var charInput1 = $('.appname-field').val().trim() !== '';
        var charInput2 = $('.link-field').val().trim() !== '';
        var charInput3 = $('.catg-field').val().trim() !== '';
        var charInput4 = $('.subcatg-field').val().trim() !== '';
        var charInput5 = $('.points-field').val().trim() !== '';

        // Show/hide submit button based on input status
        if(imageInput && charInput1 && charInput2 && charInput3 && charInput4 && charInput5) {
            $('.submitform-button').show();
        } else {
            $('.submitform-button').hide();
        }
    }

    // Trigger checkFields on input change
    $('.appicon-field, .appname-field, .link-field, .catg-field, .subcatg-field, .points-field').on('change keyup', function() {
        checkFields();
    });

    // Initial check on page load
    checkFields();
});

主要变化：

1. 添加了

   keyup

   事件： 除了

   change

   事件之外，我还向输入字段添加了

   keyup

   事件。这确保每次用户在文本字段中键入时都会调用该函数，从而提供响应更快的界面。

2. jQuery 显示/隐藏方法： 我没有直接操作 CSS

   display

   属性，而是使用 jQuery 的

   .show()

   和

   .hide()

   方法来获得更好的可读性和一致性。

确保您的输入字段和提交按钮具有 jQuery 选择器中引用的正确类名称。当所有字段都填写完毕后，此脚本现在应该正确显示提交按钮。