联系人表单变量不会从部分标签传递到 javascript 中

Contact form variables are not passing into javascript from section tag

本文关键字:标签 javascript 变量 表单 联系人      更新时间:2023-09-26

联系人表单变量不会传递到 JavaScript 中。 基本上JavaScript在验证时失败。在调试时,我"undefined is not a function."此页面上有几个分隔符。如果我将相同的代码放在一个单独的页面中,例如"contact.html"变量将传递到 javascript 中。

我的理解是HTML tag id="contact-form"由于某种原因不会传递到函数中。

爪哇脚本

function code_contactvalidation() {
    // Add form.special data (required for validation)
    $('form.special input, form.special textarea').each(function() {
        this.data = {};
        this.data.self = $(this);
        var val = this.data.self.val();
        this.data.label = (val && val.length) ? val : null;
        this.data.required = this.data.self.attr('aria-required') == 'true';
    });
    // Special form focus & blur
    $('form.special input, form.special textarea').focus(function() {
        with (this.data) {
            console.log('focusing');
            if ( label && self.val() == label) self.val('');
            else return;
        }
    }).blur(function() {
        with (this.data) {
            if ( label && self.val().length == 0 ) self.val(label)
            else return;
        }
    });
    // initialize captcha
    var randomcaptcha = function() {
        var random_num1=Math.round((Math.random()*10));
        var random_num2=Math.round((Math.random()*10));
        document.getElementById('num1').innerHTML=random_num1;
        document.getElementById('num2').innerHTML=random_num2;
        var n3 = parseInt(random_num1) * parseInt(random_num2);
        $('#captcharesult').attr('value', n3);
        $('#buttonsubmit').attr('value','Submit');
    };
    randomcaptcha();
    //initialize vars for contact form
    var sending = false,
        sent_message = false;
    $('#contact-form').each(function() {
        var _this = this;
        this.data = {};
        this.data.self = $(this);
        this.data.fields = {};
        this.data.labels = {};
        this.data.notification = this.data.self.find('.notification');
            _.each(['name','email','subject'], function(name) {
            _this.data.fields[name] = _this.data.self.find(_.sprintf('input[name=%s]', name));
            _this.data.labels[name] = _this.data.fields[name].val();
        });
    }).validate({
        errorPlacement: function() {},
        highlight: function(element) { $(element).addClass('invalid'); },
        unhighlight: function(element) { $(element).removeClass('invalid'); },
        submitHandler: function(form) {
            if (sending) return false;
            if ( sent_message ) { alert('Your message has been sent, Thanks!'); return false; }
            var field, valid = true;
            with (form.data) {
                _.each(fields, function(field, name) {
                    if ( $.trim(field.val()) == labels[name] ) { valid = false; field.addClass('invalid'); } else { field.removeClass('invalid'); }
                });
            }
            if (valid) {
                sending = true;
                $('#ajax-loader').show();
                form.data.self.ajaxSubmit({
                    error: function(errorres) {
                        $('#ajax-loader').hide();
                        randomcaptcha();
                        form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
                        form.data.notification.animate({opacity: 100}).fadeIn(500);
                        },
                    success: function(res) {
                        sending = false;
                        $('#ajax-loader').hide();
                        if (res == 'success') {
                            sent_message = true;
                            form.data.notification.removeClass('error').addClass('success').find('span:first-child').html('Your message has been sent!');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                            $('#formName').val("");
                            $('#formEmail').val("");
                            $('#formSubject').val("");
                            $('#formMessage').val("");
                            $('#formcheck').val("");
                        } else if (res == 'captchaerror') {
                            randomcaptcha();
                            form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Captcha Error');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                        } else {
                            randomcaptcha();
                            form.data.notification.removeClass('sucess').addClass('error').find('span:first-child').html('Unable to send message (Unknown server error)');
                            form.data.notification.animate({opacity: 100}).fadeIn(500);
                        }
                    }
                });
            }
            return false;
        }
    });
}

.HTML

<section id="contact">
    <div class="container">
        <div class="row text-center">
            <div id="principal" data-align="left">
                <div class="form_group_contact">
                    <script type="text/javascript" src="js/jquery.validate.pack.js"></script>
                    <script type="text/javascript" src="js/jquery.form.js"></script>
                    <form class="contactForm special validate" id="contact-form" action="sendmsg.php" method="post">
                        <p><input id="formName" name="name" type="text" value="Name" class="required" /></p>
                        <p><input id="formEmail" name="email" type="text" value="Email" class="required email" /></p>
                        <p><input id="formSubject" name="subject" class="last required" type="text" value="Subject" /></p>
                        <p><textarea id="formMessage" name="message" class="required margin20" rows="4" cols="83"></textarea></p>
                        <div class="form_captcha margin20">
                            <p>Captcha Recognition &#40;<span id="num1"></span> &#42; <span id="num2"></span>&#41;&#32;&#61;
                                <input type="hidden" id="captcharesult" name="captcha_result" value=""/>
                                <input type="text" class="required number" maxlength="3" size="3" id="formcheck" name="captcha" value=""/>
                             </p>
                        </div>
                        <p class="notification" style="display: none;"><span></span> <span class="close" data-action="dismiss"></span></p>
                        <p><input type="submit" value="" class="margin20" id="buttonsubmit" /><img id="ajax-loader" alt="" src="./images/ajax-loader.gif" /></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
if ( label && self.val().length == 0 ) self.val(label)

需要有一个分列(;)结束那行;)另外,您在联系表格上称"每个",这让我认为您期望不止一个联系表格。您需要在 HTML 中将标识符设置为"class"而不是"id",并在 jQuery 选择器中使用 "." 而不是 "#"。

现在你已经解决了这些小问题,请在Firefox中尝试一下。谷歌对javascript错误非常模糊,Firefox会给你一个更好的错误消息。请与我们分享,以便我可以使用最终解决方案编辑这篇文章。