Question

我有一个按钮。单击该按钮时，将显示一个表单。我正在使用：

  $('#theform').addClass('hidden')  
  $('#theform').removeClass('hidden');
  <div id="theform" class="hidden"><form  method="POST" action="index.php" enctype="multipart/form-data" onsubmit="return validateForm(this);"></form></div>

它工作正常，但提交表单后表单消失。

在提交后我一直在尝试制作表单，但无法找到解决方案。

我的问题：提交表单后，如何让表单显示（删除.hidden）？

Answer 1

试试这个：

var form = $('#theform');

form.submit(function(e){
   e.preventDefault(); //Prevents page from refreshing.
   form.removeClass('hidden');
});

这应该可以解决问题。

Answer 2

延伸@ XerxesNoble的帖子

var form = $('#theform');

form.submit(function(e){
   e.preventDefault(); //Prevents page from refreshing.
   if (!validateForm($(this))) { return false; }
   // need to do some actual submission here
   ...

   form.removeClass('hidden');
});

另一个简单的解决方案是，您只需在默认情况下激活表单，然后您仍然可以验证并刷新页面

Answer 3

还可以选择“删除”隐藏的属性类，然后“添加”具有可见属性的新类。试试：

jQuery(document).ready(function () {
    "use strict";

    // maybe serialize an input using ajax
    //var bppxlocation = $('input.bppx-location').val(JSON.stringify(data));
   jQuery(document).ready( function() {
   $( ".bppxLocationForm" ).submit(function( event ) {
       event.preventDefault();
       $('#bppxMessage').removeClass('msg-disabled');
       $('#bppxMessage').addClass('msg-active');


       console.log( "class removed ok" );   
    });
});
    
})( jQuery );

您可能还需要在新的 CSS 选择器上使用 .delay() 创建一个定时事件，以便让 addClass 在页面/div 上或对页面/div 执行任何有效的操作。也许尝试动画淡出消息div...也许尝试：

.msg-active{
left: 0;
opacity: 0;
animation: fadeOut ease 15s;
}
.msg-disabled{
left: -999em;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#bppxMessage{ postion: absolute; }

jquery（addClass removeClass）提交后保持表单活动

3 个答案: