Text Box Concatenation using Javascript

Question

I'm trying to get the code to work before the 7th textbox is added and once it has been added.

<!DOCTYPE html>
<html>
<head>

    <title>Concatenate Words</title>

</head>
<body>
<script type="text/javascript">
    function addNew()
        {
            document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
        }

    function concatenate()
        {
            concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + " " + document.getElementById("tb7").value;

            document.getElementById("concateForm").value = concateText;
        }


</script>
    <h1>Please enter text into the fields below</h1>
    <table>
        <tr>
            <td>
                <input type="text" id="tb1">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb2">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb3">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb4">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb5">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb6">
            </td>
        </tr>
        <tr>
            <td>
                <div id="newBut">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
            </td>
        </tr>
    </table>
</body>

The problem that i am having is that the code only works once the 7th text box has been added by clicking the button at the bottom. I was wondering whether it is possible to get the same function to work without the extra box added into the html code.

How would you go about doing this? i tried to do document.getElementById("tb7).value == ""; whilst using an if statement in the function but it didn't work for me — Bevvy
– Bevvy, Commented Jan 5, 2017 at 15:49
Thank you all for the help, @jafarbtech answer helped me out — Bevvy
– Bevvy, Commented Jan 5, 2017 at 16:54

Joel Etherton · Accepted Answer · 2017-01-05 18:06:31Z

1

Because you have a concrete selector of the tb7 box, this will throw an exception when attempting to get the value. This is why you need the 7th to before a result will show. You would be better off making this dynamic by using document.getElementsByClassName and enumerating through the list to perform your concatenation.

As an alternative, this could be made remarkable simple by switching to jQuery and using selectors and the .each() function.

Sample:

function addNew()
{
    document.getElementById("newBut").innerHTML = "<input type='text' id='tb7' class='concatInput'>";
}

function concatenate()
{
    var elements = document.getElementsByClassName("concatInput");
    var concatText = "";
    for (i = 0; i < elements.length; i++)
    {
        concatText += elements[i].value;
    }
    document.getElementById("concateForm").value = concateText;
}

edited Jan 5, 2017 at 18:06

answered Jan 5, 2017 at 15:51

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

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

3 Comments

sinisake Over a year ago

Just one thing: concatText += elements[i].value;

Bevvy Over a year ago

Thank you for your help, haven't really looked into jQuery as of yet... maybe in the future

Joel Etherton Over a year ago

@sinisake: Thanks, I had that in my brain, but typing at work in notepad I just spaced on it.

jafarbtech · Accepted Answer · 2017-01-05 15:51:24Z

Give it with a condition to check whether tb7 is available. like

((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"")

Because tb7 is not there in the DOM before you press add new button

<!DOCTYPE html>
<html>
<head>

    <title>Concatenate Words</title>

</head>
<body>
<script type="text/javascript">
    function addNew()
        {
            document.getElementById("newBut").innerHTML = "<input type='text' id='tb7'>";
        }

    function concatenate()
        {
            concateText = document.getElementById("tb1").value + " " + document.getElementById("tb2").value + " " + document.getElementById("tb3").value + " " + document.getElementById("tb4").value + " " + document.getElementById("tb5").value + " " + document.getElementById("tb6").value + ((document.getElementById("tb7"))? " " + document.getElementById("tb7").value:"");

            document.getElementById("concateForm").value = concateText;
        }


</script>
    <h1>Please enter text into the fields below</h1>
    <table>
        <tr>
            <td>
                <input type="text" id="tb1">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb2">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb3">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb4">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb5">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="tb6">
            </td>
        </tr>
        <tr>
            <td>
                <div id="newBut">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="textResult" id="concateForm" value="" onkeyup="concatenate()">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" name="Add A New Box" value="Add an extra field" onclick="addNew()">
            </td>
        </tr>
    </table>
</body>

Thank you very much, this worked for me. Does the ((document.getElementById("tb7"))? " " basically check if tb7 exists then?

kmsj13 · Accepted Answer · 2017-01-05 15:52:58Z

0

add class to all textboxes example:

<input type="text" class="tb" id="tb1">
<input type="text" class="tb" id="tb2">

then

var text = "";
document.querySelectorAll('.tb').forEach(function() { 
text = text + " " + $(this).val();
 });
alert(text);

answered Jan 5, 2017 at 15:52

kmsj13

282 bronze badges

Comments

epascarello · Accepted Answer · 2017-01-05 15:56:15Z

0

So the issue is the element may not be there. So check for its existence beofre referencing the value.

var inp7 = document.getElementById("tb7");
var str = inp7 ? inp7.value : "";

answered Jan 5, 2017 at 15:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

Text Box Concatenation using Javascript

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related