Display information on a web page based on user input using HTML

Question

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none,

How can I make them visible after inputting my name?

I'd like to type in my name and reveal all the content within the previously hidden div

<form method="post">
  <p>
    <input type="text" name="myname" />
  </p><label>
    <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div style="display:none;">
  <p>Enter your age to access this site</p>
  <p>Mr. MyName</p>

  <div>
    Waiting for your age to enter the site </div>
  <input type="text" name="age" />
</div>

javascript jquery html css

Answer 1

Answer №1

To make your work easier, consider utilizing JQuery for DOM manipulations and listening to events like the blur event on input fields to display content dynamically.
For example, type your name in an input field and then click outside the input area to see the content appear.

$('input[name="myname"]').blur(function() {
  $('div').css('display', 'block');
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form method="post">
    <p>
      <input type="text" name="myname" />
    </p>
    <label>
        <input type="submit" name="submit" value="Enter your names"/>
    </label>
  </form>
  <div style="display:none;">
    <p>enter your age to enter this site</p>
    <p>mr.myname</p>

    <div>
      waiting for your age to enter site
    </div>
    <input type="text" name="age" />
  </div>
</body>

</html>

Answer 2

To make your work easier, consider utilizing JQuery for DOM manipulations and listening to events like the blur event on input fields to display content dynamically.
For example, type your name in an input field and then click outside the input area to see the content appear.

$('input[name="myname"]').blur(function() {
  $('div').css('display', 'block');
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form method="post">
    <p>
      <input type="text" name="myname" />
    </p>
    <label>
        <input type="submit" name="submit" value="Enter your names"/>
    </label>
  </form>
  <div style="display:none;">
    <p>enter your age to enter this site</p>
    <p>mr.myname</p>

    <div>
      waiting for your age to enter site
    </div>
    <input type="text" name="age" />
  </div>
</body>

</html>

Answer 3

Answer №2

// 1. Make sure jQuery is included in your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// 2. Modify the following line 
<input type="text" name="age" />
To
<input type="text" name="age" id="age" />

// 3. Insert this code where you want to display the age
<span id="printAge" style="color:green"></span>

// 4. Place this code before closing <body> tag
<script>
 $(document).ready(function(){

    $('#age').keyup(function () { 
         var ageText = $(this).val();
         $('#printAge').html(ageText);
    });
 });
</script>

If you encounter any further issues, feel free to reach out @Chris G

Answer 4

// 1. Make sure jQuery is included in your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// 2. Modify the following line 
<input type="text" name="age" />
To
<input type="text" name="age" id="age" />

// 3. Insert this code where you want to display the age
<span id="printAge" style="color:green"></span>

// 4. Place this code before closing <body> tag
<script>
 $(document).ready(function(){

    $('#age').keyup(function () { 
         var ageText = $(this).val();
         $('#printAge').html(ageText);
    });
 });
</script>

If you encounter any further issues, feel free to reach out @Chris G

Answer 5

Answer №3

If you're looking to accomplish this task, consider the following method:

$('form').submit(function(e){
  $('#txtname').text($('[name=myname]').val());
  $('#container').show();
  e.preventDefault();// This is solely for demonstration purposes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<p>
  <input type="text" name="myname" />
</p
><label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div id="container" style="display:none;">
<p>enter your age to enter this site</p>
<p id="txtname"></p>

<div>
   waiting for your age to enter site  </div>
  <input type="text" name="age" />
</div>

Answer 6

If you're looking to accomplish this task, consider the following method:

$('form').submit(function(e){
  $('#txtname').text($('[name=myname]').val());
  $('#container').show();
  e.preventDefault();// This is solely for demonstration purposes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<p>
  <input type="text" name="myname" />
</p
><label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div id="container" style="display:none;">
<p>enter your age to enter this site</p>
<p id="txtname"></p>

<div>
   waiting for your age to enter site  </div>
  <input type="text" name="age" />
</div>

Answer 7

Answer №4

Are you attempting to reveal the hidden div once the user clicks the submit button? If I'm mistaken, please feel free to correct me.

Start by assigning a class of "hidden-div" to the hidden div. Next, utilize jQuery to detect when the submit button is clicked with the following code:

// locate the element with the class hidden-div
var hiddenDiv = $('.hidden-div');
// set up an event listener on the submit button
$('button[type=submit]').click(function(e) {
   // prevent the default action which submits the form
    e.preventDefault();

    // display the hidden div
    hiddenDiv.show();
});

To include jQuery, you must import it; this can be accomplished by adding a script tag just before the closing </body> tag

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

I trust that this meets your requirements.

Answer 8

Are you attempting to reveal the hidden div once the user clicks the submit button? If I'm mistaken, please feel free to correct me.

Start by assigning a class of "hidden-div" to the hidden div. Next, utilize jQuery to detect when the submit button is clicked with the following code:

// locate the element with the class hidden-div
var hiddenDiv = $('.hidden-div');
// set up an event listener on the submit button
$('button[type=submit]').click(function(e) {
   // prevent the default action which submits the form
    e.preventDefault();

    // display the hidden div
    hiddenDiv.show();
});

To include jQuery, you must import it; this can be accomplished by adding a script tag just before the closing </body> tag

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

I trust that this meets your requirements.

Answer 9

Answer №5

Do you think something along these lines would work?

$("[name=myname]").on("input",function() { 
  $("#otherstuff").toggle(this.value=="Fred Brown"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <p>
    <input type="text" name="myname" />
  </p><label>
    <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div id="otherstuff" style="display:none;">
  <p>enter your age to enter this site</p>
  <p>mr.myname</p>

  <div>
    waiting for your age to enter site </div>
  <input type="text" name="age" />
</div>

Answer 10

Do you think something along these lines would work?

$("[name=myname]").on("input",function() { 
  $("#otherstuff").toggle(this.value=="Fred Brown"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <p>
    <input type="text" name="myname" />
  </p><label>
    <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div id="otherstuff" style="display:none;">
  <p>enter your age to enter this site</p>
  <p>mr.myname</p>

  <div>
    waiting for your age to enter site </div>
  <input type="text" name="age" />
</div>

Display information on a web page based on user input using HTML

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ensure that only the dropdown menu that is clicked within a Vue loop opens

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

Can you explain the process of gathering texts based on CSS selector?

Updating Github pages requires clearing the cache first

What is the best method for applying classes to a collection of DOM elements with jQuery?

Implementing user authentication in node.js with passport

Prevent selection based on JSON information

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

Creating sparse fieldset URL query parameters using JavaScript

Error: The "res.json" method is not defined in CustomerComponent

Is there a way to alphabetically and numerically organize a table in vue.js?

Learn how to display each element in a list one by one with a three-second interval and animated transitions in React

Steps for opening a modal in a react native application when a button is clicked

Explanation for the strange floating math in JavaScript - Understanding the IEEE 754 standard for laymen

Error encountered while using VueJS: The Register component was not recognized as a

Module not found in Node.js environment (webpack)

Create a log table specifically for tracking changes made to the drop-down menu

The jQuery selector is unable to detect the Bootstrap modal when it is hidden