I have a form for editing a ticket that requires a "Reason for Edit". What I would like to do is have that automatically filled in as a result of when any of the input fields or the select dropdown changes. I know this can be done with javascript and an onChange event and have it modify (I believe) the innerHTML of the textarea. I'm strong on PHP/MySQL but javascript is definitely my weakness.

What I do not know and have been unsuccessful searching for, is exactly how to code this. As an example of what I have would be the following code:

<!-- Customers name -->
<input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" /><br><br>

<!-- Customer Email -->
<input type='text' name='customer_email' onChange="updateReason('Updated Customer Email')" />

If either of those two would be changed then the contents of a textarea would be updated and end with a carriage return.

Any help (or even pushed in the right direction / links to a guide) is appreciated.

I have a form for editing a ticket that requires a "Reason for Edit". What I would like to do is have that automatically filled in as a result of when any of the input fields or the select dropdown changes. I know this can be done with javascript and an onChange event and have it modify (I believe) the innerHTML of the textarea. I'm strong on PHP/MySQL but javascript is definitely my weakness.

What I do not know and have been unsuccessful searching for, is exactly how to code this. As an example of what I have would be the following code:

<!-- Customers name -->
<input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" /><br><br>

<!-- Customer Email -->
<input type='text' name='customer_email' onChange="updateReason('Updated Customer Email')" />

If either of those two would be changed then the contents of a textarea would be updated and end with a carriage return.

Any help (or even pushed in the right direction / links to a guide) is appreciated.

• javascript
• onchange

Share Improve this question Follow edited Jul 25, 2012 at 3:14 Scott Rowley asked Jul 25, 2012 at 3:04 Scott RowleyScott Rowley 48411 gold badge88 silver badges3030 bronze badges 5

• are you using jQuery? or just native HTML? – jay c. Commented Jul 25, 2012 at 3:10
• No jQuery presently, but I wouldn't be opposed to it either. – Scott Rowley Commented Jul 25, 2012 at 3:10
• Have you tried anything yet? (Btw, jQuery would be too much for something this simple) – Tyler Crompton Commented Jul 25, 2012 at 3:18
• You should go for jQuery. Its simple and will help you in future. Its tag line also say write less do more. – Salman Commented Jul 25, 2012 at 3:29
• I posted a jQuery example down there you can see that and if you get anything you can ask. But you should go for jQuery. – Salman Commented Jul 25, 2012 at 3:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

HTML:

<form name="frmTest" action="test.html">
    <textarea name="reason"></textarea>

    <!-- Customers name -->
    <input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" />

    <!-- Customer Email -->
    <input type='text' name='customer_email' onChange="updateReason('Updated Customer Email')" />
</form>

native HTML implementation:

function updateReason(text) {
  document.frmTest.reason.value += text + '\r\n';
}

My implementation separates the business logic from the design. It also uses more advanced features of JavaScript (which are supported by practically every browser).

http://jsfiddle/xrZk2/1/

For the lazy, create a textarea like so:

<input type="text" name="customer_name" id="customer_name" /><br /><br />
<input type="text" name="customer_email" id="customer_email" /><br /><br />
<textarea name="customer_change_log" id="customer_change_log" readonly="readonly"></textarea>
​

And use the following JavaScript.

(function () {
    'use strict';

    var updateReason = function (reason) {
        document.getElementById('customer_change_log').innerHTML += reason + '\n';
    };

    document.getElementById('customer_name').onchange = function () {
        updateReason('Updated Customer Name');
    };
    document.getElementById('customer_email').onchange = function () {
        updateReason('Updated Customer Email');
    };
}());​

And a little CSS never hurt anyone.

#customer_change_log {
    height: 5em;
    resize: vertical;
    width: 15em;
}​

A somewhat different approach:

HTML:

<p><label>Customer Name: <input type='text' name='customer_name'/></label></p>
<p><label>Customer Email: <input type='text' name='customer_email'/></label></p>
<p><label>Edit Reason: <textarea id="edit_reason" rows="6" cols="60"></textarea></label></p>​

JS:

(function() {
    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };
    var inputs = document.getElementsByTagName("INPUT"), len, i, input;
    var editReason = document.getElementById("edit_reason"), reasonText;

    for (i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        input.onchange = (function(name) {
            return function() {
                reasonText = editReason.value || "";
                if (reasons[name]) {
                    if (reasonText.indexOf(reasons[name]) < 0) {
                        editReason.value = reasonText + '\n' +  reasons[name];
                        editReason.value = editReason.value.replace(/^\n+/, '');
                    }
                }
            };
        }(input.name));
    };
}());

You can see it in this fiddle. The biggest difference is in the separation of the logic from the markup, using this:

    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };

The input tag that needs to be updated give it id or a class, each tag has unique id so its better to give it id like this

<input type='text' id="id-name" />

You need to add jQuery file and attach jQuery file with your html page. Attachment is written in head tag and is shown as follows.

<head>
     <script src="jquery.min.js"></script>
</head>

On the following input tag wen values is changes the function updateReason is called. Code in the script tag is written in the same html file and if you want to separate your JavaScript or jQuery code from html you can write that in .js file without the script tag and just attach that file in your html page.

<input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" />

<script>
function updateReason(text)
{
    // # is used for id and . is used for referring class in jQuery
    $('#id-name').val(text);
}
</script>