Displaying form data in a single div using Javascript

My goal is to display form data within the same div after clicking on the submit button, but without including the form itself. However, in my current code, the hidden div does not appear after clicking on the submit button. Please review the code below that I have attempted and refer to the attached image for the desired output. The title and description should be displayed in the same div instead of the form.

I am seeking assistance in identifying where I may have made a mistake with the code. Thank you. Link to Image

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    function fn(){
    var fn = document.getElementById("f1").value;
    var des = document.getElementById("t1").value;
    
    var mainDiv = document.getElementById("d2");
    var div = document.getElementById("d1");
    if(mainDiv.style.display==="block"){
    
    mainDiv.style.display="none";
    div.style.display="block";
    }
    document.getElementById("fn1").innerHTML = fn;
    document.getElementById("t2").innerHTML = des;
    }
    </script>
    </head>

    <body>
    <div style ="height:400px; width:500px; border:1px solid black; display:block;" id="d2">
    <form>
    First Name: <input type="text" name="fn" id="f1" /><br /><br />
    Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br />
    <input type="submit" name="b1" id="b1" value="Add" onclick="add()"  />
    <input type="submit" name="b1" id="b2" value="Cancel" onclick="Cancel()"  />
    </form>
    </div>

    <div style ="height:400px; width:500px; border:1px solid black; display:none;" id="d1">
    <p><span id="fn1"></span></p>
    <p><span id="t2"></span></p>
    </div>

    </body>
    </html>

Answer №1

There were a few issues that needed to be addressed.

  1. In this case, the if part of the function is unnecessary unless you are validating input in the field. If needed, you can let me know and I will add it for you.
  2. The buttons for Add and Cancel were set to type "submit." This caused them to vanish immediately after being clicked even if the correct code was present in JavaScript because they were being submitted as a form.
  3. You were trying to call the functions add() and Cancel() in the onClick events, but these functions had not been declared in any JavaScript function.

To resolve these issues, I changed the input types from submit to button, added some CSS for better element visibility, and adjusted the JavaScript section to meet your requirements. Please review the following changes:

.d2 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: block;
}

.d1 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: none;
}
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    function myFunction(){
    var fn = document.getElementById("f1").value;
    var des = document.getElementById("t1").value;
    var fDiv = document.getElementById("d2"); //fDiv stands for "Form Div"
    var hDiv = document.getElementById("d1"); // hDiv stands for "Hidden Div"
        
        hDiv.style.display = "block";
    document.getElementById("fn1").innerHTML = fn;
    document.getElementById("t2").innerHTML = des;
        fDiv.style.display = "none";
        
    }
    </script>
    </head>

    <body>
    <div name="form" id="d2" class="d2">
      <form>
      First Name: <input type="text" name="fn" id="f1" /><br /><br />
      Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br />
      <input type="button" name="b1" id="b1" value="Add" onclick="myFunction()"  />
      <input type="button" name="b1" id="b2" value="Cancel" onclick="Cancel()"  />
      </form>
    </div>

    <div name="hidden" id="d1" class="d1">
    <p><span id="fn1"></span></p>
    <p><span id="t2"></span></p>
    </div>

    </body>
    </html>

If you have any questions, feel free to leave a comment.

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

Vue.js - Resetting child components upon array re-indexing

I am working with an array of objects const array = [ { id: uniqueId, childs: [ { id: uniqueId } ] }, { id: uniqueId, childs: [ { id: uniqueId } ] }, ] and I have a looping structure ...

Utilizing NodeJS, Express, and the Jade template engine to insert JSON data into

While trying to follow a tutorial on NodeJS, Express, Jade, and MongoDB, I ran into a frustrating issue. Despite reading through various forum threads and attempting the suggested solutions, I still can't seem to make the POST command work. Please di ...

Is it possible to replicate a slow image loading experience in React.js?

Referenced the solution below How to simulate slow loading of image Slowing down internet connection with Chrome DevTools works, but the entire site loads slowly. I want to specifically focus on slowing down the image reloading. One of the suggestions w ...

Unable to provide any input while utilizing npm prompts

After installing npm prompts, I encountered a strange issue. When trying to run the example code for npm prompts, I found that I couldn't enter any input at all. The underscore in the input field would blink for a few seconds, then the cursor would ju ...

What are the steps to set up desktop notifications using Google Apps Script?

After attempting to execute this function, I noticed that nothing occurs; function alert() { var notification = webkitNotifications.createNotification( '', 'title', 'this is the message' ); notif ...

Implementing dynamic rotation of a cube in A-Frame using Javascript

I have been experimenting with A-Frame and Socket.io recently. I have successfully managed to rotate a cube/box statically using the following HTML code: <a-box position="-1 0.5 -3" rotation="0 0 0" color="#4CC3D9"> <a-animation id="cube ...

What is the best way to ensure that the input submit element is only visible after the input checkbox element has been checked?

For a school project, I am attempting to create a simulated reCAPTCHA box. Although my code is complete, I would like the functionality to submit your response from the input fields above only after selecting the reCAPTCHA checkbox. Upon researching, it ap ...

What is the process for sending an Ajax request to transfer the data from a table row column to PHP when clicking on the table row?

In my datatable, the first column of each <tr><td> row contains a numeric value. My goal is to click on a row, extract this value, and pass it to a PHP page to store it in a session. Although I have attempted the code snippet below, it does n ...

HTML5 input type "time" accepts time in 24-hour format

Users may encounter discrepancies when trying to switch between 12-hour and 24-hour clocks on their PCs. Some browsers, like Firefox, may not easily allow users to input the correct 24-hour format, while older Win32 components can be clunky in their handli ...

Leverage Context API in your React application

Module 1: import "./styles.css"; import { useState, useEffect, createContext } from "react"; import { Component2 } from "./Component2.js"; export const userContext = createContext(); export default function Application() { ...

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...

Challenges with aligning Fontawesome stacks

I utilized the code example from Fontawesome's website to create a pair of stacked social media buttons and enclosed it in a div element to float them to the right side of the page. <div class="social-icons"> <span class="fa-stack fa-lg"> ...

The Map Function runs through each element of the array only one time

I'm new to JavaScript and experimenting with the map() function. However, I am only seeing one iteration in my case. The other elements of the array are not being displayed. Since this API generates random profiles, according to the response from the ...

How can I determine the size of the custom options dropdown in Magento?

I'm facing a challenging issue that I can't seem to crack. It might be because I'm still learning the ropes and struggling with technical jargon. Please bear with me as I try to explain my problem. Here is a summary of what I'm trying ...

Functions for handling success and error events in jQuery

On a webpage, I've implemented a form for users to input an image URL that will serve various purposes. I'm currently developing an ajax function to verify if the provided URL is indeed associated with an image file. Here's what I have so fa ...

Opening a modal in Bootstrap 4 selectpicker depending on the chosen value

I am facing an issue with a selectpicker that has live search functionality. I want to trigger a modal to open only when the user clicks on the option that says "Add new contractor." However, this modal is currently opening for all options, even though I o ...

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

In Javascript, objects within local scope cannot be accessed from nested functions

I'm currently working on a function that is meant to retrieve an object from a PHP file located on a different page. I've implemented the jQuery ajax function to handle the JSON retrieval, and it seems to be functioning as intended. However, I&ap ...

Transmit a pair of data values to the ajax request

How can I send two parameters to my JavaScript and retrieve them in a PHP file? Here is my HTML: <form method="post" action="testButtonSup.php"> <p> Please choose the service:<br /> <input type="radio" n ...