[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 108
  • Last Modified:

JavaScript form question

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
john8217
Asked:
john8217
  • 2
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Albert Van HalenAnalyst developerCommented:
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
 
john8217Author Commented:
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
 
john8217Author Commented:
OK, I apparently no longer know how to close out a question. Can someone help me out (again)?
0
 
Scott Fell, EE MVEDeveloperCommented:
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

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now