【问题标题】:Retain the div shown after the form is submitted保留表单提交后显示的div
【发布时间】:2014-09-22 08:12:48
【问题描述】:

我创建了 3 个使用输入类型按钮显示的 div,这些按钮用于显示和隐藏最初隐藏的 div。在这些 div 中,有一些用于存储数据的表单。现在我要做的是在表单中提交数据后保留当前使用的 div。

这是我的 jquery 代码。

$("#add_exams").hide();
  $("#exams").hide();
  $("#add_accts").hide();

  $("#view_exam").click(function(){
      $("#add_exams").hide();
      $("#exams").hide();
      $("#add_accts").hide();

      $("#exams").fadeIn();
  });

    $("#create_exam").click(function(){
      $("#add_exams").hide();
      $("#exams").hide();
      $("#add_accts").hide();

      $("#add_exams").fadeIn();
  });

    $("#manage_accts").click(function(){
      $("#add_exams").hide();
      $("#exams").hide();
      $("#add_accts").hide();

      $("#add_accts").fadeIn();
  });

 //$(document).on("click", "#selectall",function(){ 
  $(document).on("submit","#submit_acct", function(){

       $("#add_accts").fadeIn();

  });

我的html是这样的

<div id="content">
 <input type="button" id="create_exam" value="Create Exam" title="Click to create new exam."  />
  <input type="button" id="view_exam" value="Exam" title="Click to view exam."  />
  <input type="button" id="manage_accts" value="Accounts" title="Click to view exam."  />
    <div id="add_accts">
       /*forms goes here */
    </div>

    <div id="add_exams">
       /*forms goes here */
    </div>

    <div id="exams">
       /*forms goes here */
    </div>
</div>

当我尝试提交数据时,div 没有显示,我尝试使用 jquery 来显示我想要的 div 但它不起作用,所有这些都被隐藏了。我只需要保留以显示当前显示的 div,对此有什么想法吗?

【问题讨论】:

  • 尝试添加 event.preventDefault();到您提交的 js 并在之后执行 ajax
  • 我认为你错过了什么

标签: javascript jquery html css forms


【解决方案1】:

据我了解,即使在 回发 之后,您也希望保留 可见的 div。您可以使用隐藏字段来保留 div 可见性。试试下面的代码 sn-p 供参考

$("#view_exam").click(function(){
      $("#add_exams").hide();
      $("#exams").hide();
      $("#add_accts").hide();

      $("#exams").fadeIn();
      $("#FiddenField_For_Current_Form").val("exams");
  });

并在页面加载时检查 FiddenField_For_Current_Form 中的值并显示相应的表单,如下所示

$(document).ready(function(){
  switch($("#FiddenField_For_Current_Form").val())
  {
    case "exams":
             $("#exams").fadeIn();
             break;

    default :
            $("#add_exams,#exams,#add_accts").hide();
             break;

  }


});

【讨论】:

  • 对此有问题.. 我使用了这种输入类型,并且正如预期的那样改变了点击事件的值,但它仍然是同样,我手动将 value="exams" 添加到输入中,效果很好。
  • 从 $("FiddenField_For_Current_Form").val("exams");到 $("#FiddenField_For_Current_Form").val("exams");
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-27
  • 1970-01-01
相关资源
最近更新 更多