JavaScript-powered dynamic dropdown form

I need help creating a dynamic drop-down form using JavaScript. The idea is to allow users to select the type of question they want to ask and then provide the necessary information based on their selection. For example, if they choose "Multiple Choice", they will be prompted to enter multiple answers, while if they choose "Short answer", they will only need to input one answer.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Quick Bump</title>
            <link href="styles.css" type="text/css" rel="stylesheet" />
        </head>

        <body>
            <div class="center">

            <h1 class="welcomeHeader">Create a Question:</h1>
            <form action="http://www.example.com/profile.php">

            <p class="pStyle">Please select what type of Question you'd like to ask:
                <br />
                <br />
                <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice
                <input type="radio" name="genre" value="Select the Best" /> Select the Best
                <input type="radio" name="genre" value="Short Answer" /> Short Answer
            </p>
            <br />

            <p class="pStyle">What is your Question?
                <br />
                <br />
                <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br />
            </p>
            <br />

            <p class="pStyle">What are the answers available?
                <br />
                <br />
                <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br />
                <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br />
                <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br />
                <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br />
            </p>
            <br />

            <p class="pStyle">Would you like to submit this question now?</p>
            <input type="submit" class="submitLink" name="submit form" value="Submit" />
        </form>
    </div>
    <br />
    <div class="footer">
        <a href="firstWebPage.html" class="links">Home</a>
    </div>
</body>

Answer №1

If you want to progressively display each succeeding paragraph as the previous input field is modified, jQuery can help with that.

Check out this example to give you a starting point: http://jsfiddle.net/kevincollins/uarZb/

$(function () {
    $('.pStyle:first').show();
    $('input[name="genre"]').change(function(){
        $('.pStyle:eq(1)').show();
    });
    $('input[name="Question"]').change(function(){
         $('.pStyle:eq(2)').show();
    });
    $('input[name^="Answer"]').change(function(){
         $('.pStyle:eq(3)').show();
    });
});

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

The setInterval function will run just one time when triggered by an onclick event

After watching a YouTube tutorial on creating desktop notifications, I had an idea to use it as a reminder tool. For example, having a specific reminder appear as a desktop notification every 30 minutes when triggered by clicking a button. However, the cod ...

"Receiving the error message 'Object is not a function' occurs when attempting to pass a Node.js HTTP server object to Socket.IO

A few months back, everything was working fine when I set up an HTTPS server. Recently, I revisited the application and decided to switch to HTTP (though this change may not be directly related). In my code snippet below from 'init.js', I create ...

Using Reactjs to Send Emails

Trying to incorporate the SmptJs API for email sending using JavaScript has been quite successful in a simple HTML setup. However, I am facing challenges when attempting to integrate it into a ReactJs component! The API documentation and link can be found ...

A problem has occurred in Next.js where FileReader is not recognized and is causing a Reference

Exploring the latest features of Next.js 13 with the /app directory, I encountered an issue while using the FileReader in a basic client-side component that manages an input form. Here is a brief overview of the code: "use client"; import React, ...

What could be the reason for the Express function Router() returning a value of undefined?

Currently, I am working with TypeScript and Express to develop an API that adheres to the principles of Clean Architecture. To organize my application, I have structured each route in separate folders and then imported them all into an index.ts file where ...

What causes a function loss when using the spread operator on window.localStorage?

I am attempting to enhance the window.localStorage object by adding custom methods and returning an object in the form of EnhancedStorageType, which includes extra members. Prior to using the spread operator, the storage.clear method is clearly defined... ...

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

Delay the loading of HTML elements to improve website performance

While working on my portfolio, I noticed that the page load time is quite long due to all the images needing to load before the page is fully loaded. I started thinking if there is a way to delay or prevent the loading of images and then have them load la ...

Placing a box in the center of its parent container using CSS positioning

Check out this code snippet : HTML <div class="app-cont"> <div class="app-head"> Additional Comments : </div> <div class="app-main"> balallalalalallalalalala <br/> jaslnflkasnlsnlk ...

How to concatenate a string variable to a hyperlink in a template file

Within my project, there is a file named registration_email.tpl that is passed as email_template in the bottle.template() function. This involves passing variables such as username, email_addr, role, creation_date, and registration_code. email_text = ...

A guide on showcasing nested arrays data in an Angular application

info = [ { list: [ { title: 'apple'} ] }, { list: [ { title: 'banana'} ] } ] My goal here is to extract the list items. Here is how they are structured. desired r ...

Error encounter in JSP is nested within another JSP file, both of which utilize jQuery

Before proceeding, it is important to note that I am in the process of selecting a month using a datepicker and a specific meter (by its serial number). Once this information is selected, a query will be sent to a MySQL database to retrieve data for plotti ...

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

I'm currently working on incorporating a PHP function into my HTML file using Ajax (which also contains JavaScript). My goal is to retrieve all locally stored JSON files. I've been following a guide at , but I'm facing some challenges. When ...

Create an interactive and responsive user interface for Object using the Angular framework

After receiving a JSON Object from an API call with multiple string values, I need to create an Interface for this Object in the most efficient way possible. Rather than manually writing an Interface with 100 keys all of type string, is there a quicker a ...

Angular's table data display feature is unfortunately lacking

Below is a simple HTML code snippet: <div class="dialogs"> <div id="wrapper" > <p>{{createTestingConstant()}}</p> <ng-container *ngFor="let one of contacts"> <p>{{one ...

Is there a way to extract both a and b from the array?

I just started learning programming and I'm currently working on creating an API call to use in another function. However, I've hit a roadblock. I need to extract values for variables a and b separately from the response of this API call: import ...

Webpack: Live reloading is not functioning properly, however the changes are still successfully compiling

Could someone help me understand why my React application, set up with Webpack hot reload, is not functioning properly? Below is the content of my webpack.config.js: const path = require('path'); module.exports = { mode: 'development&apo ...

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...

Finding the latitude and longitude coordinates of a point at a specific distance from another using Node.js or JavaScript

My task involves determining the square area based on a latitude and longitude (x,y) as shown in the provided figure. To accomplish this, I must calculate the coordinates of the remaining three corners by adding 10 kilometers to each side. I will be using ...

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...