Question

I have several textfields which will populate a text area.

I managed to populate it with a javascript function. On the onblur event of a textfield, the value of the textfield is passed and the textarea is field with this value.

However, my problem is the following:

If I modify a previously filled textfield, the textarea will simply append it again.

What I need is some functionality that if:

1: If I give focus to the textfield which is already been filled and I don’t modify it, it will not be appended (I implemented this with an if statement and substring.
2: If I modify a previously filled textfield, the text area DOES NOT append it again at the end of the string BUT it replaces the part of the textarea with just that text field new value.

Take for instance the following 2 textfields:

<input type="text" id="txtName" name="txtName" />
<input type="text" id="txtSurname" name="txtSurname" />

If I fill up these textfields with John and Doe respectively, the textarea value will become:

txtName=John,txtSurname="Doe"

I managed to implement this.

What I need is that if I edit txtName from John to Alex, the textarea value will be as follows:

txtName=Alex,txtSurname=Doe 

and not like is currently being displayed, i.e.

txtName=John,txtSurname=Doe,txtName=Alex

Should I achieve this by using an array which will store all the textfields values?

Any help would be greatly appreciated.

Many thanks in advance.

Answer 1

the following code should work for you. I have wrapped the textboxes inside a div. and also registered a onkeyup event on both the textboxes.

The javascript code iterates through each textboxe inside the div, and prints its name and value in the textarea.

HTML

<div id="textBoxContainer">
    <input type="text" id="txtName" onkeyup="UpdateTextArea();" name="txtName" />  
    <input type="text" id="txtSurname"  onkeyup="UpdateTextArea();" name="txtSurname" />  
</div>  
<textarea id="textAreaResult"></textarea>

Javascript

<script type="text/javascript">
    function UpdateTextArea() {
        var textBoxContainerDiv = document.getElementById("textBoxContainer");
        var textboxes = textBoxContainerDiv.getElementsByTagName("input");
        var finalResult = "";
        var textAreaFinalResult = document.getElementById("textAreaResult");

        for (var i = 0; i < textboxes.length; i++) {
            finalResult = finalResult + textboxes[i].id + "=" + textboxes[i].value + ",";
        }

        textAreaFinalResult.value = finalResult;
    }
</script>

Hope this Helps! 🙂