Concatenate multiple HTML text inputs with stored variable

问题

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.

回答1:

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;

回答2:

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>

来源：https://stackoverflow.com/questions/15730913/concatenate-multiple-html-text-inputs-with-stored-variable

标签

html

forms

string-concatenation