使用jQuery时提交表单不起作用

Question

我有一个表单，当用户单击“提交”时，我想隐藏该表单并显示“谢谢”消息。 不幸的是，有了我的代码，它无法正常工作，我也不知道为什么。 我认为这可能与jQuery有关，所以我想尝试使用香草JS重新编写此函数，但我不确定如何。

它是函数的最后一部分，if（empty.length），隐藏表格，显示导致我出现问题的感谢消息。 其他一切都工作正常，因此我想尝试使用JavaScript编写此功能，或者尝试使用jquery使其工作的另一种方式。 问题是它在我的代码中不起作用，但是当我在jsfiddle中打开它时，它不仅隐藏表单，还打开了一个新页面，并且出现错误。 我不希望将用户定向到新页面，我只希望关闭表单并显示感谢消息。 我对此很陌生，因此如果我的代码混乱，我深表歉意。

更新：我真的认为这里的问题是jQuery，我可以用纯JS编写它，并且可以解决此问题吗？

 var $subscribe = $('#click-subscribe'); var $subscribeContent = $('#subscribe-content'); var $subscribeClose = $('#subscription-close'); $subscribeContent.hide(); $subscribe.on('click', function(e) { e.preventDefault(); $subscribeContent.slideToggle(); }); $subscribeClose.on('click', function(e) { e.preventDefault(); $subscribeContent.slideToggle(); }) var $form = $('#signup-form'), $signupForm = $('.form-show'), $formReplace = $('#thank-you'); $formReplace.hide(); $form.on('submit', function() { var empty = $(this).find("input, select, textarea").filter(function() { return this.value === ""; }); if (empty.length <= 0) { $signupForm.hide(); $formReplace.show(); } else { return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click-subscribe">Show / hide form</button> <div id="subscribe-content"> <div class="subscription-signup"> <div class="subscription-close" id="subscription-close"></div> <div class="email-signup"> <p class="cat-title subscription-text">lorem ipsum</p> <p class="subscription-text">lorem ipsum</p> <p class="subscription-text">lorem ipsum</p> <div class="subscription-form"> <form id="signup-form" class="form-show" name="signup-form" method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}"> <div class="form-row salutation header"> <label for="salutation">Title</label> <div class="chzn-row valid salutation"> <select id="title" name="title" class="chzn-global-select input-select optional required"> <option value="">--</option> <option value="Mr">Mr.</option> <option value="Mrs">Mrs.</option> <option value="Ms">Ms.</option> <option value="Miss">Miss</option> </select> </div> </div> <div class="form-row required"> <label for="firstname"> <span aria-required="true">First Name</span> <span class="required-indicator">*</span> </label> <input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off"> </div> <div class="form-row required"> <label for="lastname"> <span aria-required="true">Surname</span> <span class="required-indicator">*</span> </label> <input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off"> </div> <div class="form-row required"> <label for="signup-email" style="display:none;">Email</label> <input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" /> </div> <div class="form-row text-center"> <input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" /> </div> </form> <div id="thank-you"> <p>Thanks for subscribing!</p> </div> </div> </div> </div> </div> 

Answer 1

我认为其他一些javascript / jQuery代码在运行代码时会出现问题，为简单的解决方案，请将您的代码作为插件并按如下所示进行调用。

创建一个名为validation.js新js文件

(function($){
    $.fn.validation = function(){        
        var $subscribe = $('#click-subscribe');
        var $subscribeContent = $('#subscribe-content');
        var $subscribeClose = $('#subscription-close');

        $subscribeContent.hide();
        $subscribe.on('click', function(e) {
            e.preventDefault();
            $subscribeContent.slideToggle();
        });
        $subscribeClose.on('click', function(e) {
            e.preventDefault();
            $subscribeContent.slideToggle();
        });

        var $form = $('#signup-form'), $signupForm = $('.form-show'), $formReplace = $('#thank-you'); $formReplace.hide();
       this.on('submit', function(e){
            var empty = $(this).find("input, select, textarea").filter(function() {
                return this.value === "";
            });
            if(empty.length == 0){
                $signupForm.hide();
                $formReplace.show();
            }
            e.preventDefault();
        });        
    }; 
})(jQuery);

现在，像下面这样在head调用validation.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="validation.js"></script>
<script type="text/javascript">
$(function(){
    $('#signup-form').validation();
});
</script>