JavaScript is having trouble properly concealing or revealing elements on the webpage

I am currently designing a web form for my wife, who works at an insurance agency. She needs a web-based form to collect information for processing insurance quotes. Without access to a server, I need to ensure that all the details inputted by the user can be printed once the form is completed. The goal is to allow users to select different types of quotes in the first section and be directed through the subsequent sections accordingly. For example, if a user owns a home, they will not be required to provide renter's insurance information.

However, I am facing some issues with the form functionality. Whenever a user clicks "Next" on the quoteselection section, they are taken directly to the last section (autoquote) instead of progressing to the customerinfo section. Additionally, there seems to be no way for users to go back to the quoteselection section without refreshing the page.

I have also encountered difficulties with the JavaScript code, as any alterations seem to render the functions non-operational. As a novice in JavaScript and with some background in C#, I would greatly appreciate any assistance in resolving these issues. It has been quite some time since I last worked with HTML, and my attempts to find a solution with Google have been unsuccessful. Please feel free to ask for any additional information that may help clarify this matter.

javascripthtmlcss

Answer №1

When using the code `...style.display == "block"`, it will specifically target inline styles. However, if you are dealing with an external stylesheet, you can utilize the following approach:

/*eslint-env es6*/

function nextForm(){
    // Obtain different forms and assign them to local variables
    var quoteselection = document.getElementById('quoteselection');
    var customerinfo = document.getElementById('customerinfo');
    var autoquote = document.getElementById('autoinsquote');
    var nextBtn = document.getElementById('nextbtn');
    var backBtn = document.getElementById('backbtn');
    
    // Check which form is currently being displayed
    if(window.getComputedStyle(quoteselection).display == 'block') {
        // Show or hide different forms based on the current position
        alert('Moving to customer info');
        backBtn.style.display = 'block';
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'block';
        autoquote.style.display = 'none';
    } else if(window.getComputedStyle(customerinfo).display == 'block') {
        backBtn.style.display = 'block';
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'block';
        autoquote.style.display = 'none';
    } else (window.getComputedStyle(autoquote).display == 'block') {
        backBtn.style.display = 'block';
        nextBtn.style.display = 'none';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'none';
        autoquote.style.display = 'block';
    }
}

function backForm() {
    // Obtain different forms and store them to local variables
    var quoteselection = document.getElementById('quoteselection');
    var customerinfo = document.getElementById('customerinfo');
    var autoquote = document.getElementById('autoinsquote');
    var nextBtn = document.getElementById('nextbtn');
    var backBtn = document.getElementById('backbtn');
    
    // Check which form is currently being displayed
    if(window.getComputedStyle(quoteselection).display == 'block') {
        // Show or hide different forms based on the current position
        backBtn.style.display = 'none'; 
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'block';
        customerinfo.style.display = 'none';
        autoquote.style.display = 'none';
    } else if(window.getComputedStyle(customerinfo).display == 'block') {
        backBtn.style.display = 'none';
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'block';
        customerinfo.style.display = 'none';
        autoquote.style.display = 'none';
    } else (window.getComputedStyle(autoquote).display == 'block') {
        backBtn.style.display = 'block';
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'block';
        autoquote.style.display = 'none';
    }
}

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

Adjusting <Video> source according to screen dimensions using JavaScript

I am currently experimenting with developing a website locally on my computer using bootstrap. One unique feature I am working on is having a <video> as the header of the site. My goal is to have the video display at full width and height on mobile ...

javascripthtmlvideobootstrap-4media-queries

Currently, I am in the process of creating a game, but I am having trouble with my click event not functioning as expected on a dynamically

I'm currently working on a platform game and I've implemented a window.onload event that is supposed to trigger. Within this event, I am creating a div element, assigning it an ID, and then setting its onclick property. Despite being confident i ...

javascriptdom-events

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

Merge the values of an object's key with commas

I'm dealing with an array of objects that looks like this: let modifiers = [ {name: "House Fries", price: "2.00"}, {name: "Baked Potato", price: "2.50"}, {name: "Grits", price: "1.50"}, {name: "Nothing on Side", price: "0.00"} ] My goal is to con ...

javascriptarraystypescriptobjectconcatenation

Implementing mixin functions in vue.router routes with Vue.js

Is there a way to dynamically change the title of the window based on each route? I have included a meta: { title: ... } object in each child object within the routes: []. Here is an example: routes: [ { path: 'profile/:id', name: 'Prof ...

javascriptvue.jsvue-routermixinsvue-mixin

Using object in TypeScript to reduce arrays

Is there a way to set the return value for my reducer in TypeScript? I am looking to achieve: Instead of using 'any', what should I assign as the type for acc? How can I define my return type so that the output will be {temp: 60, temp: 60}? retu ...

javascripttypescript

A guide to converting variables into a JSON Object in Javascript

I am looking for a way to insert external variables into a JSON object. An example of what I want: var username = "zvincze"; And then, using that variable to inject it into a JSON object: var json = '{"username":"VARIABLE_GOES_HERE"}' var obj ...

javascriptjsonvariables

Is there a way to automatically redirect the server URL when a file is modified?

I am currently experimenting with a function that is supposed to only display a message in the console without redirecting the actual URL of my server when a file is changed. watcher.add("/home/diegonode/Desktop/ExpressCart-master/routes/2.mk"); watche ...

javascriptnode.jsexpress

The action does not execute when the form is submitted

I’m currently working on a simple registration form, but I’ve encountered an issue with my code. Despite troubleshooting, I can’t seem to identify any errors in my code. Upon submission of the form, the page fails to redirect to register.php. Below ...

phphtml

Changing the size of a dynamic watermark png in php

I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...

phphtmlgd

How can you use React.js to only display "Loading..." on the page while the full name is included in the URL?

I've hit a roadblock while trying to solve this issue. Here's the situation: On the page where I need to display certain information, I intended to showcase the full name of the individual from a previous form submission. However, instead of seei ...

javascriptreactjs

The Process of Sending Values from app.js to a Vue File in Vue.js

My app.js is currently receiving a value called gtotal. I am trying to pass this value to the orderForm.vue file but am facing some difficulties in achieving this. require('./bootstrap'); window.Vue = require('vue'); window.EventBus ...

javascriptlaravellaravel-5vue.js

Adjust the background color of the table header in Google Charts

Is it possible to dynamically change the background color of the header row (and rows) in Google Charts based on values from a PHP database? The documentation suggests using the following code: dataTable.setCell(22, 2, 15, 'Fifteen', {style: &a ...

javascriptphpgoogle-visualization

background image alteration when scrolling

I've been attempting to change the background image on scroll, but I haven't had any luck finding a guide. So, I'm hoping someone here can help me out. I found a video that showcases exactly what I'm trying to accomplish - https://www.y ...

javascripthtmlcssscroll

What are the steps to incorporating the angular/material version 7.0.1 component into my project?

My journey with Angular and Google Material Design has been successful so far. I have been building my front-end app using the official documentation from https://angular.io/tutorial and https://material.angular.io/guides. While browsing through a similar ...

javascriptangulartypescriptangular-material

Sending Data From Child Component to Parent Component in React Using a onClick Event

I am a newcomer to using React and am currently immersed in a React Rails application. <h1><img src={activity.image_url}/></h1> <p> {activity.name} </p> <p> Rating: {activity.rating} </p> ...

javascriptreactjs

Issue with loading 3D model using three.js in a web browser

While using ASP.Net core, I encountered an issue with loading a 3D model using the Three.js library. The error message "ERR_NAME_NOT_RESOLVED" appears when trying to load the scene. You can view the code in my VS View here. This code works perfectly in VS ...

javascriptc#asp.netasp.net-corethree.js

Struggling to find the width of an SVG text box or add line breaks after a specific number of characters?

I am currently working on creating an SVG text box using the amazing Raphael library. The content inside this text box comes from a dynamic string that is extracted from an XML document. There are times when this string turns out to be longer than the can ...

javascripthtmlsvgraphael

Is the user currently viewing this page?

My website, www.mysite.com, has a basic login system using PHP and MYSQL. With the $_SESSION['user_id'] in place, I am wondering if there is a way to determine if a user currently has the page www.mysite.com/test.php open. Is it possible to acco ...

phpjquerymysqlhtmlajax

The text should be wrapped to overlap with an image positioned above it

Currently, I am in the process of enhancing a webpage that contains a significant amount of old legacy code. One issue I have encountered pertains to text wrapping within a fixed-height and width container, as illustrated in the image below: https://i.sst ...

htmlcss