Ajax 函数不禁用表单提交按钮

Question

我有一个联系表单，当用户输入太多文本时无法提交。

更具体地说，Ajax 函数禁用发送按钮，防止在字符计数器处于负值区域时提交表单。

我最近对代码进行了一些更改，但现在该功能不再有效。

不确定是什么问题。任何帮助表示赞赏。谢谢。

// AJAX form messaging
$(function() {

    // get the form
    var form = $('#modal-contact-form');
    
    // get the messages element
    var formMessages = $('#modal-contact-form-responses');

    // set up event listener for contact form
    $(form).submit(function(e) {
        // disable html submit button
        e.preventDefault();
    
        // serialize form data
        var formData = $(form).serialize();
            
        // submit form using AJAX
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // make sure formMessages element has 'success' class
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');
            
            // set message text
            $(formMessages).text('Your message has been sent. Thank you!');
            
            // clear form
            $('input, textarea').val('');
            $("#modal-contact-form-message").trigger('change');         
        })
        .fail(function(data) {
            // make sure formMessages element has 'error' class
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // set the message text
            $(formMessages).text('Input error. Please review and re-submit.');
        });

    });

});

// text area character counter
// displays total characters allowed
// displays warning at defined count (currently 150)
// disables submit button when < 0
// max characters that can be input set by maxlength attribute in HTML
(function($) {

    $.fn.charCount = function(submit, options){

        this.submit = submit;

        // default configuration properties
        var defaults = {    
            allowed: 1250,      
            warning: 150,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: ''
        }; 
    
        var options = $.extend(defaults, options); 

        function calculate(obj,submit){
        
            submit.attr("disabled", "disabled");

            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $(obj).next().addClass(options.cssWarning);
            } else {
                $(obj).next().removeClass(options.cssWarning);
            }
            if(available < 0){
                $(obj).next().addClass(options.cssExceeded);
            } else {
                $(obj).next().removeClass(options.cssExceeded);
                submit.removeAttr("disabled");
            }
            
            $(obj).next().html(options.counterText + available);
        };
        
        this.each(function() {              
            $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
            
            calculate(this, submit);

            $(this).keyup(function(){calculate(this,submit)});
            $(this).change(function(){calculate(this,submit)});
        });

    };

})(jQuery);

$(document).ready(function(){   
    $("#modal-contact-form-message").charCount($("#submit_cform"));
});

/* textarea and character counter */

.modalDialog form > #counter-container {}

.modalDialog form > #counter-container > .counter {
    font-size: 1.2em;
    color: #ccc;
    font-family: arial, helvetica, sans-serif   
}
.modalDialog form > #counter-container .warning {
    color: orange;
}

.modalDialog form > #counter-container .warning::after {
    content: " approaching limit";
    font-size: 1em;
}

.modalDialog form > #counter-container .exceeded {
    color: red;
}

.modalDialog form > #counter-container .exceeded::after {
    content: " form won't submit";
    font-size: 1em;
}


/* success and error messages */

#modal-contact-form-responses,
#modal-subscription-form-messages {
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 5px 0; 
    font-size: .9em;
}

.success {
    color: black;
    background-color: #dff2bf;
}

.error {
    color: black;
    background-color: #ffbaba;
}

<form action="" method="post" id="modal-contact-form">

  <div>
    <label for="modal-contact-form-name">Name <span>*</span></label>
    <input type="text" name="name_cform" id="modal-contact-form-name" maxlength="75" required>
  </div>

  <div>
    <label for="modal-contact-form-email">E-mail <span>*</span></label>
    <input type="email" name="email_cform" id="modal-contact-form-email" maxlength="75" required>
  </div>

  <div id="subject-line">
    <label for="modal-contact-form-subject">Subject</label>
    <input type="text" name="subject_cform" id="modal-contact-form-subject" maxlength="75">
  </div>

  <div id="counter-container">
    <label for="modal-contact-form-message">Message <span>*</span></label>
    <textarea name="message_cform" id="modal-contact-form-message" maxlength="1500" cols="25" rows="5" required></textarea>
  </div>

  <input type="hidden" name="formtarget_cform" value="modal" id="modal-contact-form-hidden">

  <button type="submit" name="submit_cform" id="modal-contact-form-submit">Send Message</button>

  <p id="modal-contact-form-responses"></p>

</form>

Answer 1

你必须改变

$("#modal-contact-form-message").charCount($("#submit_cform"));

改成这个

$("#modal-contact-form-message").charCount($("#modal-contact-form-submit"));

Ajax 函数不禁用表单提交按钮

Ajax function not disabling form submit button

javascript

ajax

jquery