forms - Concatenate multiple HTML text inputs with stored variable

Question

Welcome To Ask or Share your Answers For Others

forms - Concatenate multiple HTML text inputs with stored variable

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

forms - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:23:37+0000

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;

Categories

forms - Concatenate multiple HTML text inputs with stored variable

forms - Concatenate multiple HTML text inputs with stored variable

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Edit

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags