Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was in use remains visible after submitting data via a form.

Below are the jQuery codes I am using:

$("#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();

  });

The structure of my HTML looks like this:

<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 go here */
    </div>

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

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

After attempting to submit data, I found that the desired div is not being displayed even with the attempted jQuery manipulation. All of them remain hidden. I am seeking suggestions on how to retain display for the current active div. Any ideas?

Answer №1

From my understanding, the goal is to maintain the visibility of a certain div even after a post-back. A solution for this is to utilize a hidden field to store the div's visibility status. Below is a sample code snippet that demonstrates how this can be achieved:

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

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

During page load, you can check the value stored in HiddenField_For_Current_Form and display the appropriate form accordingly:

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

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

  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

You can activate Lightgallery just one time in VueJs

I am facing an issue where lightgallery can only be opened once. Subsequent clicks on the button are unresponsive. The lightgallery is being used as a component. Within my parent component, I have two buttons for opening image or video gallery ParentComp ...

Is it possible that an object sent as a response body from a Spring MVC application's controller cannot be fetched using the jQuery AJAX method?

After making an AJAX call, the EmployeeBean object is not being returned and no exception is being thrown. Here is the code snippet from the controller method: I am trying to return an EmployeeBean object from this method using @Responsebody @RequestMapp ...

What is the best way to execute 2 statements concurrently in Angular 7?

My goal is to add a key rating inside the listing object. However, I am facing an issue where the rating key is not displaying on the console. I suspect that it might be due to the asynchronous nature of the call. Can someone help me identify what mistak ...

Encountering a problem while attempting to start Gulp

I encountered an error while updating modules and I'm not sure how to resolve it. Every time I attempt to update, the same error reappears. I tried updating the core JS using the following commands: npm outdated npm install npm install I also referr ...

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

I have a lengthy text saved in a string and I am looking to swap out certain words in the text with a highlighted version or a markdown link that directs to a glossary page explaining those specific words. The words needing replacement are contained within ...

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

Tips for customizing the appearance of the span tag within the option text of an HTML select

Unique Link In my current situation, I am facing an issue where the asterisk in the first option of my HTML select element should be displayed in red color. Despite my efforts to style it, the asterisk always appears in the default black color. I have pr ...

Ajax dropdown menu displaying 'Loading Data' message during processing

Is it possible to display a Please wait.. or Loading... label underneath my Combo box while data is loading? I would like to show a Loading... message under the switch box when switching between Male and Female. https://i.sstatic.net/zpFDF.jpg This is th ...

The anticipated reply was supposed to consist of an array, however it ended up being an

I'm brand new to Angular and I've been searching for a solution to my issue with no luck. My app is supposed to retrieve data from a MongoDB database and display it to the user. However, I keep getting this error message: Error: [$resource:bad ...

picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass: dateClass() { return (date: Date): MatCalendarCellCssClasses => { const unvailableArray = this.shareDate.unavailableDates; ...

Get the HTML file converted to a DOCX format that is compatible with Mac Pages

I am currently working on a Next.js application using TypeScript, and I want to give users the ability to download a page as a DOCX file. Initially, I was excited to discover that this could be easily accomplished by following this method. However, after ...

Receiving a "Bad Request" error when trying to access a website

Every time I attempt to call a lengthy URL, I encounter a Bad Request issue. https://localhost:44320/RespostaEmail/96635/750396/[%7B%22IdItem%22:8,%22IdTipoReposta%22:80%7D,%7B%22IdItem%22:1,%22IdTipoReposta%22:80%7D,%7B%22IdItem%22:3,%22IdTipoReposta%22:8 ...

Having trouble obtaining the serialized Array from a Kendo UI Form

I am working on a basic form that consists of one input field and a button. Whenever the button is clicked, I attempt to retrieve the form data using the following code: var fData = $("#test").serializeArray(); Unfortunately, I am facing an issue where I ...

Exploring the process of gathering information using Node.js' http.request

I am currently facing a challenge where I need to call a REST API URL in one method and then use the response from that call to form a subsequent query to another URL, let's say git, to fetch some information. Despite browsing through several examples ...

How can one ensure that Discord waits for a script to complete running, and how can you prevent Discord from responding until all necessary data has been obtained?

I recently started working with node.js and asynchronous programming, and I'm facing a challenge that has me puzzled. My goal is to create a Discord bot that fetches data from a third-party website. While I can successfully retrieve the data and see i ...

What is the contrast between specifying a MIME type and omitting it?

If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...

Ways to eliminate extra spacing when search bar is expanded

My code is all contained within a header with the class 'example'. When the 'search' button is clicked, a div with the class 'search-bar' appears and its borders match those of the header. However, I want the search bar to ali ...

Ensuring form field accuracy through server-side validation using Ajax - Mastering the art of Ajax

I am in need of implementing Ajax to validate my form fields, currently I have a javascript validation set up. Is it possible to reuse my existing javascript code and integrate Ajax for form validation? HTML Form <form method="post" action="ajax/valid ...

Is file timestamp utilized by Apache to verify if a resource has been changed?

Currently, I am working on an HTML page that references a large JavaScript file (1MB+) that is rarely updated. According to this source, the JavaScript file will not be resent if it hasn't been modified. I'm curious about how Apache determines i ...