Concatenate multiple HTML text inputs with stored variable

Question

I am trying to create a simple html form which asks for some details from a user and once this has been submitted will add the text to some predetermined text in a text box.

Example of this...

Text box 1 - Enter Name Text box 2 - Enter Age Text box 3 - Enter Location

When this is submitted I would like this to be added preferably into a text box or even just output has text on an html page with other text already stored so the output would maybe be something like "Hello John, you are 25 years old and from London".

What I have is very basic:

    <html>
    <form>
    Name: <input type="text" name="name"><br>
    Age: <input type="text" name="age"><br>
    Location: <input type="text" name="location"><br>
    <input type="submit" value="Submit">
    </form>
    <html>

Beyond this I'm unsure how to get all the values into another text box with the other predetermined text.

Any help or direction in this would be appreciated.

@Mr.Alien I updated my question with what I had managed so far before becoming stuck on the next step to take. — drmscp
– drmscp, Commented Mar 31, 2013 at 15:50

Daniel Imms · Accepted Answer · 2013-03-31 15:52:26Z

4

Here is a solution, so get the elements using document.getElementById(), attach an event handler to the click event using element.onclick = function () {} and alert() to show a message box.

jsFiddle

JavaScript

var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');

button.onclick = function () {
    var str = 'Hello ' + name.value + 
        ', you are ' + age.value +
        ' years old and from ' + location.value;
    alert(str);
};

HTML

<label>
    Enter name: 
    <input id="name" />
</label>
<br />
<label>
    Enter age: 
    <input id="age" />
</label>
<br />
<label>
    Enter location: 
    <input id="location" />
</label>
<br />
<button id="test">Test</button>

Edit

To output it to the page use element.innerHTML to set the contents of an element.

jsFiddle

output.innerHTML = str;

edited Mar 31, 2013 at 15:52

answered Mar 31, 2013 at 15:34

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

drmscp Over a year ago

This is really useful. Instead of using alert for a message box can this be output on the page so the text can be copied?

Daniel Imms Over a year ago

Updated with outputting to page.

Sharp Mouse · Accepted Answer · 2019-05-28 11:39:43Z

0

function yes() {
var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');
    var str = 'Hello ' + name.value + 
        ', you are ' + age.value +
        ' years old and from ' + location.value;
    document.getElementById('test').innerHTML=str;
};

<html>
<body>
<label>
    Enter name: 
    <input id="name" />
</label>
<br />
<label>
    Enter age: 
    <input id="age" />
</label>
<br />
<label>
    Enter location: 
    <input id="location" />
</label>
<br />
<button onclick="yes()">Test</button>
<p id="test"></p>
</body>
</html>

answered May 28, 2019 at 11:39

Sharp Mouse

111 bronze badge

1 Comment

Harsha Biyani Over a year ago

Add some explanation to avoid this post to consider as low quality post by stackoverflow.

Collectives™ on Stack Overflow

Concatenate multiple HTML text inputs with stored variable

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related