What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI
Course Of The Month
9 days, 22 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
JavaScript form question
Posted on 2016-08-23
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:
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
<input type="radio" name="choices" value="Two">Two
<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>
[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
Active today
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
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
<input type="radio" name="choices" value="Two">Two
<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>
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
<input type="radio" name="choices" value="Two">Two
<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>
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!
Active today
Do you see the "Best" and "Assisted" solution button/links in each answer?
http://support.experts-exchange.com/customer/portal/articles/2527982
http://support.experts-exchange.com/customer/portal/articles/2527982
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5.
Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month9 days, 22 hours left to enroll
623 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.