HTML Form output

Hi Folks,
I'm newbie here trying to get HTML, JS & CSS in harmony...

The code below is a sample form(includes CSS, HTML, & JS) ,. The ultimate goal:  when I click the submit button, JS script will collect all the user's input and replace the green pane with the submissions entered.
The initial function I started to use,  it throws me a err: [object HTMLFormElement]
thanks for looking, constructive ideas or even better aproaches are welcome, I know it looks a bit messy but it's my first FORMS attempt in one sit down :)
it looks like a of lot of lines thought the reason why is because it has the selections within a menu  but the actual code is very small



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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Curriculum Vitae</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">


	
	<style type="text/css">
		body {
		margin: 0;		
		}	
		/* Styling Header*/
		.header {
		background-color: #964a4a;
		padding: 20px;
		text-align: center;
		font-family: Georgia, 'Times New Roman', Times, serif;
		color: #fff;
		font-family: monospace;
		overflow: hidden; /* Ensures the content is not revealed until the animation */
		border-right: .15em solid orange; /* The typwriter cursor */
		margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		animation: 
			openning 3.5s steps(30, end),
			blink-caret .5s step-end infinite;
		}

		/* The Opening effect */
		@keyframes openning {
		from { width: 0 }
		to { width: 100% }
		}
	</style>


</head>
	
	<div class="header">
	  <img src="scrollcity.jpg" width="300" height="158">
	  <h1>Curriculum Vitae</h1>
	  <style>
		 /* Rounding Picture */
		  img {
  			border-radius: 50%;
		}
	  </style>
	</div>


	<script>
			function submitButton(){
				document.writeln("HHHHHEEEEELLLLOOO");
				document.getElementById("cvapplication").submit();
			}
	</script>

<body bgcolor="#333300">
<div>
	<br>
	<br>
	<br>
</div>

<form name ="cvapplication" id="cvapplication"> 
	<p><b><font size="5" color="#C0C0C0">Enter your Full Name: </font></b></p>
	<input type="text" name="fname" id="fname" size="40" style="font-style: oblique"> 


	<p><font size="5" color="#C0C0C0"><b>Select </b></font><b>
	<font size="5" color="#C0C0C0">State: </font></b></p>
				<p>
				<select name="state" id="state" size="1" style="font-style: oblique">
				<option>- Select -</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Connecticut</option>
				<option value="DE">Delaware</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="HI">Hawaii</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="IA">Iowa</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="ME">Maine</option>
				<option value="MD">Maryland</option>
				<option value="MA">Massachusetts</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MS">Mississippi</option>
				<option value="MO">Missouri</option>
				<option value="MT">Montana</option>
				<option value="NE">Nebraska</option>
				<option value="NV">Nevada</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NY">New York</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VT">Vermont</option>
				<option value="VA">Virginia</option>
				<option value="WA">Washington</option>
				<option value="WV">West Virginia</option>
				<option value="WI">Wisconsin</option>
				<option value="WY">Wyoming</option></select> </p>
	<p><b><font size="5" color="#C0C0C0">Enter Your Phone Number:</font></b></p>		
				
					
		<input type="number" name="area" id="area" size="3" style="font-style: oblique">
		<input type="number" name="phone" id="phone" size="7" style="font-style: oblique">


	<p><b><font size="5" color="#C0C0C0">Select Education Level: </font></b></p>		
				<select name="education" id="education" size="3">
					<option value="">- Select -</option>
					<option value="1">Below High School</option>
					<option value="2">High School / GED</option>
					<option value="3">Trade/College/University</option>
					<option value="4">Boot Camp</option>
				</select>
			
		
	<input type="button" onclick="submitButton" value="Submit Information"></input>
	<button type="reset" value="Reset" style="font-weight: bold">Reset</button>
</form> 


</body>
</html>

Open in new window

LVL 4
ivan rosaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Hi, I'll add several notes in this comment about things to adjust/avoid in your code and hope you'll learn something today.

As an answer of your question the submit will reload your page so if you want to replace the green pane you need to use "cookies" or "localstorage" so when the submit button clicked you will set a flag (for example 'submited') then when the page reloaded you've to check it and fill the div with the 'submissions entered' text.

I suggest the use of addEventListener() to separate the logic of JS and HTML and to avoid the old-school inline events like onclick, HERE is a sample :

<script>
	document.addEventListener("DOMContentLoaded", function(event) { 
	  //Attach the click event listener
	  document.getElementById("submit-btn").addEventListener('click', function(){
	  	alert("HHHHHEEEEELLLLOOO");

		localStorage.setItem('submitted', true); //Set the flag here before the reload
		document.getElementById("cvapplication").submit();
	  });

	  //Check if the flag is already in the localstorage then show the text instead of the form
	  if ( localStorage.getItem('submitted') ){
	  	document.getElementById("cvapplication").outerHTML = '<h1>Submissions entered</h1>'
	  }
	});
</script>

Open in new window


You need to remove the inline event and give your element an identifier, (NOTE here you don't need "</input>" input is a self closed tag) like :

<input type="submit" id="submit-btn" value="Submit Information"

Open in new window



Validate the HTM code :

1. It will be better to place your <script> tag inside the <head> tag and use the DOMContentLoaded event listener so you'll be sure that your JS code will executed when the DOM is fully loaded.

2. The style part you've inside the body should be placed in the head :

<style>
/* Rounding Picture */
img {
	border-radius: 50%;
}
</style>

Open in new window


You've already the <style> tag inside the head so just place the rule img { border-radius: 50%; } inside it.

3. Note that the <body> bgcolor attribute is not supported in HTML5. Use CSS instead by adding the background color attribute to your existing body rule like :

body{
   margin: 0;	
   background-color: #333300;
}

Open in new window


4. HTML <font> tag is not supported in HTML5, so it will be better to avoid using it and use <label> tag with CSS style instead.

CSS :
label {
     font-size: 24px;
     color: #C0C0C0;
     font-weight: bold;
}

Open in new window

 
HTML :

<label>Select</label>
<label>State: </label>

Open in new window


5. The HTML div below should be placed inside the <body> section :

<div class="header">
	<img src="scrollcity.jpg" width="300" height="158">
	<h1>Curriculum Vitae</h1>
</div>

Open in new window


6. It's considered as a bad practice to use HTML below for spacing purpose, else it will be better to replace it with CSS margin rule:

<div>
	<br>
	<br>
	<br>
</div>

Open in new window


In this case, since you want the space after the header tag, you could adjust the margin you've already in your CSS to add bottom value like :

/* Styling Header*/
.header {
    ...
    margin: 0 auto 55px auto;  /* Gives that scrolling effect as the typing happens */
    ...
}

Open in new window


Advice, avoid the use of inline style & use common classes.

HERE is a sample updated version of your code.
test.html
Julian HansenCommented:
Some comments
1. Interface design - always keep it simple. Animations are nice but when the user must wait 3.5s for an animation (that has no functional value) to complete - it is annoying
2. Consider using a text field (with validation) for your phone numbers - it is confusing to have the number inc / dec buttons on a phone number field.
3. Your HTML is badly formed - your body statement is in the middle of the document - it should come immediately after the closing </head>
4. Don't put styles inline - use classes in a <style> section or a stylesheet. Changing styles after you have added them inline is a pain.
5. You are using non HTML5 code. <font> has been deprecated - take a look at the HTML5 spec to see what is supported.
6. In your submit button onclick you have this
<input type="button" onclick="submitButton" value="Submit Information"></input>

Open in new window

This does not do anything - to call a function in the onclick you need to included the parenthesis
<input type="button" onclick="submitButton(frm)" value="Submit Information"></input>

Open in new window

7. Don't use document.write or any of its derivatives in a function (don't use it at all unless you have to). After document load any call to document.write will overwrite the entire document.

To get the form data with JavaScript you can do this.
<input type="button" onclick="submitButton(this.form)" value="Submit Information"></input>

Open in new window

Change your submit button to

Then in your function
function submitButton(frm){
  var formData = new FormData(frm);
  for (var value of formData.values()) {
    console.log(value); 
  }
}

Open in new window


Why do you want to replace the green block with the data entered? Is this just for learning purposes or is there a practical reason? If we know the intended purpose we can help you with formatting the output.
ivan rosaAuthor Commented:
Thanks for the input, I had reshaped  the Full code a little bit, to a point where it doesn't break  and I can actually capture the values from the form, so excited :) we are moving things forward...

I see both comments <font> is depreciated nowdays... in that case what should I use, in order for me to keep the current text style? also trying to finalized the goal here, PICA -- (what I currently have), I'd like to do once the submission is in, it will display the values within the same page --seePICB ..., I know there's something called innerHTML that might help but I'm a bit fuzzy on to connect it ?
PICAPICB

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Curriculum Vitae</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
		body {
		margin: 0;		
		}	
		/* Styling Header*/
		.header {
		background-color: #964a4a;
		padding: 20px;
		text-align: center;
		font-family: Georgia, 'Times New Roman', Times, serif;
		color: #fff;
		font-family: monospace;
		overflow: hidden; /* Ensures the content is not revealed until the animation */
		border-right: .15em solid orange; /* The typwriter cursor */
		margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		animation: 
			openning .5s steps(30, end),
			blink-caret .5s step-end infinite;
		}

		/* The Opening effect */
		@keyframes openning {
		from { width: 0 }
		to { width: 100% }
		}
	</style>

	<script>
		//not sure how to create this function to show all the inputs in the section of the form by replacing the form. as described in the above pics
		function submitButton(frm){
			var individual = {
				fname: document.getElementById("fname").value,
				state: document.getElementById("state").value,
				area: document.getElementById("area").value,
                phone: document.getElementById("phone").value,
                hobbies: document.getElementById("hobbies").value,
				education: document.getElementById("education").value
			};
			var fullIndividual = (individual.fname + " " + individual.state + " " + individual.area + " " + individual.phone + " "+ individual.hobbies + " " +  individual.education);
			document.getElementById("demo").innerHTML = fullIndividual;
		}
	</script>

</head>	

<body bgcolor="#333300">

	<div class="header">
	  <img src="scrollcity.jpg" width="300" height="158">
	  <h1>Curriculum Vitae</h1>
	  <style>
		 /* Rounding Picture */
		  img {
  			border-radius: 50%;
		}
	  </style>
	</div>

	<div id="myDIV">
			<P id="demo"></p>
	</div>



	<form name ="cvapplication" id="cvapplication"> 
		<p><b><font size="5" color="#C0C0C0">Enter your Full Name: </font></b></p>
		<input type="text" name="fname" id="fname" size="40" style="font-style: oblique"> 


		<p><font size="5" color="#C0C0C0"><b>Select </b></font><b>
		<font size="5" color="#C0C0C0">State: </font></b></p>
				<p>
				<select name="state" id="state" size="1" style="font-style: oblique">
				<option>- Select -</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="WV">West Virginia</option>
				<option value="WI">Wisconsin</option>
				<option value="WY">Wyoming</option></select> </p>
	
		<p><b><font size="5" color="#C0C0C0">Enter Your Phone Number:</font></b></p>							
		<input type="text" name="area" id="area" size="3" style="font-style: oblique">
		<input type="text" name="phone" id="phone" size="7" style="font-style: oblique">

        <p><b><font size="5" color="#C0C0C0">Input Your Hobbies</font></b></p>
        <textarea rows="3" name="hobbies" id="hobbies" cols="100" style="font-style: oblique"></textarea></p>

		<p><b><font size="5" color="#C0C0C0">Select Education Level: </font></b></p>		
		<select name="education" id="education" size="3">
					<option value="">- Select -</option>
					<option value="Below High School">Below High School</option>
					<option value="High School / GED">High School / GED</option>
					<option value="Trade/College/University">Trade/College/University</option>
                    <option value="Boot Camp">Boot Camp</option>        
      
		</select>
				
		<input type="button" onclick="submitButton(this.form)" value="Submit Information"></input>
		<button type="reset" value="Reset" style="font-weight: bold">Reset</button>
	</body>
</form> 
</html>

Open in new window

Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Julian HansenCommented:
in that case what should I use, in order for me to keep the current text style
Use CSS with whatever element is appropriate for that section of the document (<p>, <div>, <section>, <article> etc)

I know there's something called innerHTML that might help but I'm a bit fuzzy on to connect it ?
Can you explain why you want to do this? Functionally it is not really practical in the real world so if you can give me some idea of where you are going I can give you the code.

Do you want to do this in plain JavaScript or jQuery?

JavaScript

To write to an element
1. Get a reference to the form
var form = document.forms.cvapplication;

Open in new window

2. Create the text
var output = '<p>Your submission has been accepted</p>';
output += '<p>Enter your full name: ' + form.fname.value + '</p>';
output += '<p>Select State: ' + form.state.value + '</p>';
output += '<p>Enter your phone number: ' + form.phone.value + '</p>';
output += '<p>Select Education Level: ' + form.education.value + '</p>';

Open in new window

3. Replace form content with the output
form.innerHTML = output;

Open in new window

ivan rosaAuthor Commented:
Thanks Julian.
unfortunately i tried the above,

troubleshooted: I added it the above int he script, then tried again  replacing it and it actually gave me 4 errs, Uncaught TypeError: Cannot read property 'fname' of undefined and Uncaught ReferenceError: submitButton is not defined


i probably didn't follow correctly..., :( , since I'm fairly new... since Frontpage 2003...
Zakaria AcharkiAnalyst DeveloperCommented:
I see both comments <font> is depreciated nowdays... in that case what should I use, in order for me to keep the current text style?

I think you didn't see the attached file in my first comment, since it gives you the logical alternative of "<font>" in your case (what is <label> with CSS rules) with a practical sample updated in your own code, Since I still see the deprecated  bgcolor and 'style' tag inside the body and also the old-school inline event "onclick" I will put the code here instead of attaching the file this time.

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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="" ntent="ie=edge">
		<title>Curriculum Vitae</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<style type="text/css">
			body {
				margin: 0;	
				background-color: #333300;	
			}	

			/* Styling Header*/
			.header {
			    background-color: #964a4a;
			    padding: 20px;
			    text-align: center;
			    font-family: Georgia, 'Times New Roman', Times, serif;
			    color: #fff;
			    font-family: monospace;
			    overflow: hidden;
			    border-right: .15em solid orange;
			    margin: 0 auto 55px auto;  /* Gives that scrolling effect as the typing happens */
			    animation: openning 3.5s steps(30, end), blink-caret .5s step-end infinite;
			}

			/* The Opening effect */
			@keyframes openning {
				from { width: 0 }
				to { width: 100% }
			}

			/* Rounding Picture */
			img {
				border-radius: 50%;
			}
		</style>

		<script>
			<script>
		document.addEventListener("DOMContentLoaded", function(event) { 
		  //Attach the click event listener
		  document.getElementById("submit-btn").addEventListener('click', submitButton, false);
		});

		function submitButton(){
			var my_form = document.forms.cvapplication;

			document.getElementById("demo").innerHTML = '<h1>Submissions entered</h1>';

			my_form.fname.outerHTML = my_form.fname.value;
			my_form.state.outerHTML = my_form.state.value;
			my_form.area.outerHTML = my_form.area.value;
			my_form.phone.outerHTML = my_form.phone.value;
			my_form.hobbies.outerHTML = my_form.hobbies.value;
			my_form.education.outerHTML = my_form.education.value;
		}
		</script>

	</head>

	<body>
		<div class="header">
			<img src="scrollcity.jpg" width="300" height="158">
			<h1>Curriculum Vitae</h1>
		</div>

		<form name ="cvapplication" id="cvapplication"> 
			<p>
				<label>Enter your Full Name: </label>
			</p>

			<input type="text" name="fname" id="fname" size="40" style="font-style: oblique"> 

			<p>
				<label>Select :</label>
				<label>State: </label>
			</p>
			
			<p>
				<select name="state" id="state" size="1" style="font-style: oblique">
					<option>- Select -</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
				</select> 
			</p>
			<p>
				<label>Enter Your Phone Number:</label>
			</p>		

			<input type="number" name="area" id="area" size="3" style="font-style: oblique">
			<input type="number" name="phone" id="phone" size="7" style="font-style: oblique">

			<p><label>Select Education Level: </label></p>		
			<select name="education" id="education" size="3">
				<option value="">- Select -</option>
				<option value="1">Below High School</option>
				<option value="2">High School / GED</option>
				<option value="3">Trade/College/University</option>
				<option value="4">Boot Camp</option>
			</select>
			

			<input type="button" id="submit-btn" value="Submit Information"></input>
			<button type="reset" value="Reset" style="font-weight: bold">Reset</button>
		</form> 
	</body>
</html>

Open in new window


not sure how to create this function to show all the inputs in the section of the form by replacing the form

If you want to replace the form elements you may need outerHTML not the inner one, something like :

document.addEventListener("DOMContentLoaded", function(event) { 
  //Attach the click event listener to the submit button with the id "submit-btn"
  document.getElementById("submit-btn").addEventListener('click', submitButton, false);
});

function submitButton(){
	var my_form = document.forms.cvapplication;

	document.getElementById("demo").innerHTML = '<h1>Submissions entered</h1>';

	my_form.fname.outerHTML     = my_form.fname.value;
	my_form.state.outerHTML     = my_form.state.value;
	my_form.area.outerHTML      = my_form.area.value;
	my_form.phone.outerHTML     = my_form.phone.value;
	my_form.hobbies.outerHTML   = my_form.hobbies.value;
	my_form.education.outerHTML = my_form.education.value;
}

Open in new window

Julian HansenCommented:
Here is my sample that works. If yours is not working then it is in your implementation - post a link so we can see what is going on.

The second error regarding the submit button comes from your original code.
I have removed your old code so there are no errors.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ivan rosaAuthor Commented:
Thank you both,for the input now, You guys Rock!!! I understand a bit better now.  :)
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.