Conceal the div containing all its content within

I need to hide a div with all the content inside it using this code:

<form action="" method="POST" name="form">
<p for="name">text :</p><input type="text" name="name" value="<?php echo $name_g; ?>" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)"/>
<p for="phone">text :</p><input type="text" name="phone" value="<?php echo $phone_g; ?>" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)"/>
<p for="blood">text :</p><input type="text" name="blood" value="<?php echo $blood_g; ?>" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)"/>
<p for="id">text :</p><input type="text" name="id" value="<?php echo $id2_g; ?>" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)"/>
<p for="email">text : </p><input type="text" name="email" value="<?php echo $email_g; ?>" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)"/>
<input type="button" onclick =" printvalues();" value="text"> 

<div id="info_check">
<script type="text/javascript">
    function printvalues() {
        var div = document.getElementById("info_check");
        div.innerHTML += "<span>text :</span>"+form.name.value+"<br>";
        div.innerHTML += "<span>text :</span>"+form.phone.value+"<br>";
        div.innerHTML += "<span>text :</span>"+form.blood.value+"<br>";
        div.innerHTML += "<span>text :</span>"+form.id.value+"<br>";
        div.innerHTML += "<span>text :</span>"+form.email.value+"<br>";
        div.innerHTML += "<input type='submit' name='sub' value='text'/>";
        $("#info_check").show();
    }
</script>
<h2>text</h2>
<input type='button' onclick="$('#info_check').hide();" value='text' style='background: #F00 none repeat scroll 0% 0%; min-width: 20px; width: 80px;color: #fff; border-radius:4px; text-decoration: none; margin-right: 10px;'/>
</div>
</form>

I am facing an issue where I need to hide #info_check along with all its content.

Answer №1

According to my understanding, you are looking to display a preview of the form that a user has filled out.

Here is a suggestion:

<!DOCTYPE html>
<html>
<body>
    <form action="">
        <div id="info_check"></div>
    </form>
    <input type='button' onclick="$('#info_check').hide();" value='Hide The Div'/>
    <input type='button' onclick="$('#info_check').show();" value='Show The Div'/>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        function printvalues()
        {
            var div=document.getElementById("info_check");
            div.innerHTML+="<span>text :</span>some values<br>";
            div.innerHTML+="<span>text :</span>some values<br>";
            div.innerHTML+="<span>text :</span>some values<br>";
            div.innerHTML+="<span>text :</span>some values<br>";
            div.innerHTML+="<span>text :</span>some values<br>";
            div.innerHTML+="<input type='submit' name='sub' value='Submit'/>";
        }
        printvalues();
    </script>
</body>
</html>

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 features of findOneAndRemove and findOneAndUpdate are not functioning optimally as expected

Attempting to create a toggle similar to Facebook's "like" feature. The code functions correctly when there are no existing "likes." It also deletes properly when there is only one "like" present. However, issues arise when multiple likes accumulat ...

Issues with Line Chart in D3: Scaling and Zoom not functioning as expected due to ClipPath limitations

I am utilizing D3 version 4 to process data and create a graph based on dates. Although I have successfully adjusted everything to be compatible with zoom functionality, I am struggling to prevent the line from extending beyond the chart axes. I would pre ...

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

The page container does not have a specified height

I am currently working on a website with the following structure: <body> <div id="container"> <!-- all content goes here --> </div> </body> My challenge is to center the page without using float, The body has a ...

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document ...

The exact measurement of width is not specified in the custom element that extends HTMLCanvasElement

I have created a custom element that extends a canvas, but when I try to add it to the DOM, the width appears to be undefined. Here is my code snippet. class Renderer extends HTMLCanvasElement { constructor() { super(); } } customElements.def ...

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

Unexpected behavior with MongoDB update function

If I have a model like this: var stuffSchema = new mongoose.Schema({ "id": 1, "cars": { "suv": [], "sports": [], "supercar": [{ "owner": "nick", "previousOwners": [ ObjectId("574e1bc0abfb4a180404b17f"), ObjectId ...

I'm feeling a bit lost with this API call. Trying to figure out how to calculate the time difference between the

Currently, I am working on a project for one of my courses that requires making multiple API calls consecutively. Although I have successfully made the first call and set up the second one, I find myself puzzled by the specifics of what the API is requesti ...

Building a favorite feature in Django using HTML

Currently, I am working on implementing an Add to Favorite feature. So far, I have succeeded in displaying a button with an icon based on the value of the is_favorite field, but I am facing difficulties updating my database. I would like to know: How can ...

Implementing auto-complete functionality for a text box in an MVC application using jQuery

After incorporating code for auto completion in a text box using AJAX results, the following code was utilized: HTML: <div class="form-group col-xs-15"> <input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" > ...

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: https://i.sstatic.net/6Mrtf.png I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngO ...

Selected selector failing to function properly

I have been diving into the world of jQuery selectors and wanted to share a small example I created. The idea is to display what has been selected from a dropdown menu, but unfortunately, my example isn't functioning properly. I must be making a small ...

Angular directive that verifies the presence of a specific number of child li elements

Currently, I have a basic ul that utilizes ng-repeats to display li elements fetched from an external source via a promise. There is also a search input present which filters these elements, and I want the ul to be hidden when there are no more elements th ...

Steps for making a webpack-bundled function accessible globally

I am currently working with a webpack-bundled TypeScript file that contains a function I need to access from the global scope. Here is an example of the code: // bundled.ts import * as Excel from 'exceljs'; import { saveAs } from 'file-save ...

Insert straight lines between elements in an inline list

I am working on building a step progress bar using the HTML code below: .fa-check-circle { color: #5EB4FF; } .fa-circle { color: #CFD7E6; font-size: 14px; } .container { width: 100%; position: absolute; z-index: 1; margin-top: 20px; } . ...

Sending a JSON object as a string to PHP

I am currently using a JQuery script to manipulate an image. While most functions are working correctly, I am facing issues with returning data to PHP. Despite trying various examples from Stackoverflow, I have not been able to successfully return the data ...

Steps to initiate a slideUp animation on a div using jQuery

Is there a way to make a div slide up from the bottom of the page to cover 30% of the screen when a user clicks a button, and then slide back down when the button is clicked again? Any suggestions on how I can achieve this? Thank you! EDIT 1) $(document ...

Understanding the process of extracting HTML tags from an RSS feed using Python

I am looking for a way to create a plain text readout of an RSS feed using a small utility. Below is the code I have: #!/usr/bin/python # /usr/lib/xscreensaver/phosphor -scale 3 -program 'python newsfeed.py | tee /dev/stderr | festival --tts' ...

When working with props.data in MDBNav, learn how to set the active TAB or LINK

Utilizing ReactJS, I am incorporating MDBNav from MDBreact. https://i.sstatic.net/IQtEe.png This snippet demonstrates the container where props.data is defined: import React from 'react' import MiTabs from "../componentes/MiTabs"; class VpnLi ...