Populating a textarea from several textfields

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 stri开发者_如何学运维ng 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.

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! :)

For the record, I feel like this code is an ugly hack, but it should do the trick...

    var fieldName = "txtName"; //your field name
    var newValue = "Alex"; //your new value
    var value = document.getElementById("my-textarea").value;
    value = "," + value; //add a comma so we can ensure we don't replace the wrong value where the fieldname is a substring of another fieldname
    if(value.indexOf("," + fieldName + "=") > 0) //see if a value is already defined
    {
        var index = value.indexOf("," + fieldName + "=") + fieldName.length + 2;
        var start = value.substring(0, index); //get the portion before the value
        var end = value.substring(index); //get everything else
        if(end.indexOf(",") > 0)
        {
            end = end.substring(end.indexOf(",")); //remove the value by reducing the end to the location of the next comma
        }else{
            end = ""; //if there isn't another comma it was the last value in the list, so set the new end to nothing
        }
        value = start + newValue + end; 
        value = value.substring(1); //remove the starting comma we gave it
        document.getElementById("my-textarea").value = value;
    }else{
        //append it to the end as you are already doing
    }