So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?
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>
Active 7 days ago
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 discusses four methods for overlaying images in a container on a web page
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
- Node.js
- IT Administration
- JavaScript
- Server Software
- MySQL Server
- Percona, *Clustering
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month11 days, 7 hours left to enroll
719 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.