CODEWITHSUNDEEP
javascripthtmlformsfunctionconcatenation
Bevvy
Bevvy

Reputation: 15

Text Box Concatenation using Javascript

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.

Upvotes: 1

Views: 3000

Answers (4)

Joel Etherton
Joel Etherton

Reputation: 37543

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;
}

Upvotes: 1

epascarello
epascarello

Reputation: 207527

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

Upvotes: 0

kmsj13
kmsj13

Reputation: 28

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);

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7015

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>

Upvotes: 0

Related Questions