How to display user entered information using JavaScript?

Question

I have a form code tat will allow the user to enter information. I'm trying to display certain parts of that information onto a new page using javascript. Basically, the page is meant to have the user enter information and have the name, date, time, and email display in a new tab or page. But I can't seem to have it displayed. Can anyone help me?

<html lang="en" >
    <head>
    <title>Shy Music Booking Confirmation</title>
    <link rel="stylesheet" href="music.css" type="text/css" />

<body>
<div id="wrapper">
<div id="form">
    <header><h1>Shy Music Private Lessons</h1></header>

<script type="text/javascript">

      function addtext()
      {
         var userName = document.booking.userName.value;
         var userDate = document.booking.userDate.value;
         var userTime = document.booking.userTime.value;
         var userEmail = document.booking.userEmail.value;

         document.writeln("Thank you! You have just entered the following:");
         document.writeln("<pre>");
         document.writeln("Name: " + userName);
         document.writeln("Date: " + userDate);
         document.writeln("Time: " + userTime);
      }
    </script>
</head>
<hr>
<form name="booking">
<h1>Book a Slot Here!</h1>
    <label for="userName">Name: <br><input type = "text" name = "userName"></label>      <br><br>
    <label for="userEmail">E-mail Address: <br><input type = "email" name = "userEmail"></label><br><br>
<label for="userPhone">Phone Number: <br><input type = "tel" name = "userPhone">    </label><br><br>
<label for="userInstrument">Instrument: 
<select>
<option>Guitar</option>
<option>Drums</option>
<option>Piano</option>
</select>
</label>
<br><br>
<label for="userTime">
Preffered Time: 
<select>
<option>9:00</option>
<option>9:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>1:00</option>
<option>1:30</option>
<option>2:00</option>
<option>2:30</option>
<option>3:00</option>
<option>3:30</option>
<option>4:00</option>
<option>4:30</option>
</select>
</label>
<select>
<option>AM</option>
<option>PM</option>
</select>
<br>
<br>
    <label for="userDate">Date: <br><input type = "date" name = "userDate"></label><br><br>

<input type="submit" value="Submit" >
<form action="#">
<input type="button" value = "Back" onclick="javascript:history.go(-1)" />
</form>
</form>
</div>
</div>
</body>
</html>

Answer 1

I was working on this for a lot of time, but it wasn't working. But, I tried it recently and it worked! I hope this was helpful.

<html>
<head>
<h1> Welcome</h1>
</head>
<body>
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>`
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
<script>

      function submitted()
      {
        var a = document.getElementById("name").value;

        if (a=="")
        {
      document.getElementById("new").innerHTML="";
      alert("Please Enter a valid name!");
        }
        else if (a==" ") {
        document.getElementById("new").innerHTML=""
      alert("Please Enter a valid name!");
        }
        else
        {
          document.getElementById("new").innerHTML="Thank you, " + a + ". " + "Click here to continue.";
        }
      }
</script>
</body>
</html>

Or, slightly tightened, as a working snippet:

 function submitted() { var a = document.getElementById("name").value.trim(); document.getElementById("new").innerHTML= a===""?"":"Thank you, " + a + ". " + "Click here to continue."; }

 <p> Enter name: </p> <input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required> <input type="Submit" onclick="submitted()"> <br> <br> <a id="new" href="www.google.com"> </a>

Answer 2

The problem with your code was that you were using document.write in a dynamic setting. When using it in this context, document.write will erase the content of the current document and replace it with the text specified by its parameters. For this reason, document.write is commonly regarded as poor way to represent and insert text/data. And it typically affects the plethora of beginners learning JavaScript. Here are some alternatives you should keep in mind:

element.innerHTML : Like I said in the comments. Use .innerHTML to insert the formatted HTML into document through an element on the page. It doesn't necessarily have to be specified by an id attribute. It can very well be given by any other form of element obtainment.

node.appendChild : This method is more DOM-friendly than the first. It allows you to insert a node at the end of the body of the element specified by node . For example:

 var form = document.myForm, new_element = document.createElement('input'); new_element.type = "button"; new_element.value = "Submit"; form.appendChild( new_element );

I hope this helped.

How to display user entered information using JavaScript?

Question

2 answers

solution1
2 2020-09-10 04:33:53

solution2
0 2013-04-21 22:54:00

How to display user entered information using JavaScript?

Question

2 answers

solution1 2 2020-09-10 04:33:53

solution2 0 2013-04-21 22:54:00

solution1
2 2020-09-10 04:33:53

solution2
0 2013-04-21 22:54:00