Solved

JavaScript form question

Posted on 2016-08-23
5
92 Views
Last Modified: 2016-08-30
Hi. I'm trying to learn javascript. I have a very simple form (the code is shown below) and there is a specific thing I want to accomplish.
     This is what I want to achieve: Someone enters a value in the text box and chooses a number from the radio buttons. Then when they click the "submit" button, both those values get pasted at the end of their respective sentences at the bottom.
     Here is the code so far:

<html>
<head><title>Test Form</title></head>

<body>
<form>
Enter first name here <input type="text" name="FirstName" value="First Name"><br><br>
Pick a number
<input type="radio" name="choices" value="One">One&nbsp;&nbsp;
<input type="radio" name="choices" value="Two">Two&nbsp;&nbsp;
<input type="radio" name="choices" value="Three">Three<br><br>
<input type="submit" value="Submit Entries">
</form>

<p>Your first name is: </p>
<p>The number you picked is: </p>
</body></html>

Open in new window

0
Comment
Question by:john8217
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 41767847
I have this well commented but I suggest you take the course on jquery https://www.codecademy.com/learn/jquery. Before you do that, make sure you can run through the entire course on html and css, otherwise you will be lost. I also suggest doing the javascript course first before you go through jquery.  


http://jsbin.com/poqoxuhaki/edit?html,output
<html>
<head><title>Test Form</title></head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(function(){ // run when page loads
  $('#submit').on('click',function(e){ // list for click of submit button
     e.preventDefault(); // prevent form from being submited
    var name = $('input[name="FirstName"]').val(); // value of input
    var choices = $('input[name="choices"]:checked').val(); // value of radio
     $('.getName').text(name); // place name value in the span class getName
     $('.getNumber').text(choices); // place radio value in span class getNumber
  });
  
});
</script>
  
<body>
<form>
Enter first name here <input type="text" name="FirstName" value="First Name"><br><br>
Pick a number
<input type="radio" name="choices" value="One">One&nbsp;&nbsp;
<input type="radio" name="choices" value="Two">Two&nbsp;&nbsp;
<input type="radio" name="choices" value="Three">Three<br><br>
<input id="submit" type="submit" value="Submit Entries">
</form>

  <p>Your first name is: <span class="getName"></span> </p>
<p>The number you picked is: <span class="getNumber"></span>  </p>
</body>


</html>

Open in new window

2
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 250 total points
ID: 41768372
While Scotts answer is correct, I'd like to add a plain javascript solution to this as well.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<script>
		window.onload = function () {
			document.querySelector('form').onsubmit = function () {
				var choosenName = document.querySelector('input[name="FirstName"]').value;
				var choosenNumber = document.querySelector('input[name="choices"]:checked');

				document.getElementById('choosenName').innerHTML = choosenName;
				if (choosenNumber)
					document.getElementById('choosenNumber').innerHTML = choosenNumber.value;

				return false; // prevent the form from submission in order to show values in html
			};
		}
	</script>
</head>
<body>
	<form>
		Enter first name here <input type="text" name="FirstName" value="First Name"><br><br>
		Pick a number
		<input type="radio" name="choices" value="One">One&nbsp;&nbsp;
		<input type="radio" name="choices" value="Two">Two&nbsp;&nbsp;
		<input type="radio" name="choices" value="Three">Three<br><br>
		<input type="submit" value="Submit Entries">
	</form>

	<p>Your first name is: <span id="choosenName"></span></p>
	<p>The number you picked is: <span id="choosenNumber"></span></p>
</body>
</html>

Open in new window

1
 

Author Comment

by:john8217
ID: 41775607
Thank you to both of you. This is exactly what I wanted; the older, JavaScript way and the newer jQuery way. Now I can examine them together to see how both methods do this same thing. As illogical as this sounds, I was slightly more interested in seeing the JavaScript method because I kind of have an obsession with trying to understand it. But I definitely preferred to get both methods, which I got. Thanks guys!
0
 

Author Comment

by:john8217
ID: 41775610
OK, I apparently no longer know how to close out a question. Can someone help me out (again)?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 41775724
Do you see the "Best" and "Assisted" solution button/links in each answer?

http://support.experts-exchange.com/customer/portal/articles/2527982
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Node.js 11 82
Form submit takes only for one form 23 54
Checkbox changes display when resizing window 8 26
Drag & Drop Error 5 32
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question