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.


Show source
| javascript   | function   | html   | forms   | concatenation   2017-01-05 16:01 4 Answers

Answers to Text Box Concatenation using Javascript ( 4 )

  1. 2017-01-05 16:01

    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;
    }
    
  2. 2017-01-05 16:01

    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>

  3. 2017-01-05 16:01

    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);
    
  4. 2017-01-05 16:01

    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 : "";
    

Leave a reply to - Text Box Concatenation using Javascript

◀ Go back