Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status is "rejected".

The response object looks like this:

{status: "REJECTED", redirectUrl: null, loanID: null, errors: Array(0), rejectReason: "Existing Customer", …}

My current if/else statement is as follows:

if(b.status == "ACCEPTED") {
  window.location = b.redirectURL;
}
else {
  // need help here
}

I attempted to use the following method but it did not work:

document.getElementById('page18').style.visibility = "visible"; 

Here is how the end portion of my form is structured:

Page 17 is where users land after hitting submit, and page 18 is the rejection page that should be shown if they receive a rejected response.

<!---PAGE 16 -->

<div id="page17" class="pageform">
  <h3 style="text-align: center;">Thank you for your submission!</h3>
  <h4 style="text-align: center;"> Please wait one moment while we process your application.</h4> <br> <br>
  <div class="loading">Loading…</div>
</div>

<!---REJECT PAGE -->

<div id="page18" class="pageform">
  <h3 style="text-align: center;">Sorry, we were unable to fund your request at this time.</h3>
</div>

Answer №1

When working with CSS, if you have the following code:

visibility: hidden;

To make a div visible using JavaScript, you can use:

document.getElementById('page18').style.visibility = "visible"; 

However, if you are using the display property in your CSS like this:

display: none;

You will need to use this JavaScript code to show the element:

document.getElementById('page18').style.display='block';

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

Using a pool.query with async/await in a for-of loop for PostgreSQL

While browsing another online forum thread, I came across a discussion on using async/await with loops. I attempted to implement something similar in my code but am facing difficulties in identifying the error. The array stored in the groups variable is f ...

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

Creating a conditional statement within an array.map loop in Next.js

User Interface after Processing After retrieving this dataset const array = [1,2,3,4,5,6,7,8] I need to determine if the index of the array is a multiple of 5. If the loop is on index 0, 5, 10 and so on, it should display this HTML <div class="s ...

Activate DivMenu's second list item automatically

I've been trying to use the trigger function multiple times, but it just won't work. I need help with auto-triggering the menu of the second list element. Can someone please assist me? Here is a snippet of my code: $("document").ready(functio ...

I'm hitting send, but all the browser can muster is a bad request error

When sending JSON to the Play server from an HTML page, I encountered a strange behavior in the server code. Upon using a debugger, it became apparent that the server initially responded with a bad request, followed by processing my controller message and ...

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 ...

Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json. By u ...

What steps should I follow to successfully incorporate Zurb Foundation 4 Sections (tabs) into my Javascript Ajax functionality?

I am currently incorporating Zurb Foundation 4.1.5 into my application and I am faced with the challenge of implementing Zurb Section Javascript to handle "tabs" on the page. The content within these tabs is dynamic and fetched via Ajax calls. I am seeking ...

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

Currently, I am faced with a challenge while working on Django. My goal is to implement a chained AJAX call - meaning that once one call returns, it triggers additional AJAX calls. Despite thorough research and referencing the suggested methods in the Djan ...

Unable to retrieve data from the specified location using axios in a Nuxt application

I am experiencing an issue where axios is not following my GET path when the project is built, although it works fine in dev mode. I am using this code to fetch local .html files and inject them into my vue component. <template> <div> ...

Error parsing JSON in the Perl programming language

I am encountering an issue EXECUTION FAILED ...malformed JSON string, neither array, object, number, string or atom, at character offset 0 (before "(end of string)")" whenever I attempt to parse the JSON string retrieved from the database into this cod ...

Trigger PHP function on mouse click in WordPress

On one of my PHP files for a WordPress site, I currently have this code: <div class="tabs"> <a href="#tab1" id="items_id">Items</a> </div> <div class="section" id="tab1"> <?php get_template_part('page/tab1' ...

Struggling to remove a row from the MUI DataGrid within a MERN CRUD application with Redux/RTK?

Struggling to understand why the delete button isn't working on my Material UI (MUI V5) Data Grid table. As a beginner in coding, especially with MERN and Redux, my mind is overwhelmed after trying various solutions all weekend - Google, Stack Overflo ...

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

I am currently working on creating a dialog box with a text area using material UI. Unfortunately, when I input a significant amount of text, the dialog box ends up extending beyond the screen, making it impossible to scroll down to access the buttons. &l ...

Converting property values to camelCase during JSON serialization in ASP.NET Core

In my SQL Tables, I have definitions of dynamic grids using the AGGrid library for Angular. Here's an example: TB_AGGrid_Definitions ID GridKey 1 TestGrid TB_AGGrid_Columns ID GridId Field 1 1 FirstColumn 2 1 SecondColumn For my Ang ...

Exploring ReactJS: Combining JSON data with HTML elements

Recently, I started learning ReactJS. As I'm iterating through JSON data, I realized I need to incorporate some links into it. This is how my JSON data is structured: "text": ["For more information on the functionalities of the platform and services ...

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...