我有一个表单,当用户点击提交时,我希望隐藏表单并显示感谢信息。不幸的是,我的代码,它不起作用,我无法弄清楚为什么。我认为它可能与jQuery有关,所以我想尝试使用vanilla 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>
答案 0 :(得分:0)
我认为其他一些javascript / jQuery代码会产生运行代码的问题,因为简单的解决方案会使您的代码成为插件并将其称为跟随。
创建名为js
validation.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);
现在,请拨打validation.js
下面的head
<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>
答案 1 :(得分:0)
最好从表单中删除method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}
并按如下所示编辑代码:
将onclick
方法添加到您的按钮:
<input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" onclick="subscribeSubmit()" />
声明您的subscribeSubmit()
函数:
function subscribeSubmit() {
$.post('/yourURL', {
// your data
}).done(() => {
// when done :)
})
}