3

「編集理由」が必要なチケットを編集するためのフォームがあります。私がやりたいのは、入力フィールドまたは選択ドロップダウンのいずれかが変更された結果として、それが自動的に入力されるようにすることです。これはjavascriptとonChangeイベントを使用して実行でき、textareaのinnerHTMLを変更する（私は信じています）ことを知っています。私はPHP/MySQLに強いですが、javascriptは間違いなく私の弱点です。

私が知らず、検索に失敗したのは、まさにこれをコーディングする方法です。私が持っているものの例として、次のコードがあります：

<!-- 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')" />

これら2つのいずれかが変更されると、テキストエリアの内容が更新され、キャリッジリターンで終了します。

任意のヘルプ（または正しい方向にプッシュ/ガイドへのリンク）をいただければ幸いです。

4

4 に答える 4

1

私の実装では、ビジネスロジックを設計から分離しています。また、JavaScriptのより高度な機能（実質的にすべてのブラウザーでサポートされています）を使用します。

http://jsfiddle.net/xrZk2/1/

怠惰な場合は、次のようなテキストエリアを作成します。

<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>
​

そして、次の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');
    };
}());​

そして、小さなCSSは誰も傷つけません。

#customer_change_log {
    height: 5em;
    resize: vertical;
    width: 15em;
}​
于 2012-07-25T03:34:01.280 に答える
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>

ネイティブHTML実装：

function updateReason(text) {
  document.frmTest.reason.value += text + '\r\n';
}
于 2012-07-25T03:19:49.220 に答える
0

更新する必要のある入力タグにはIDまたはクラスを指定します。各タグには一意のIDがあるため、次のようにIDを指定することをお勧めします。

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

jQueryファイルを追加し、htmlページにjQueryファイルを添付する必要があります。添付ファイルはヘッドタグに記載されており、以下のように表示されます。

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

次の入力タグでは、値が変更され、関数updateReasonが呼び出されます。スクリプトタグのコードは同じhtmlファイルに書き込まれます。JavaScriptまたはjQueryコードをhtmlから分離する場合は、スクリプトタグなしで.jsファイルに記述し、そのファイルをhtmlページに添付するだけです。

<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>
于 2012-07-25T03:23:21.040 に答える
0

やや異なるアプローチ：

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

あなたはこのフィドルでそれを見ることができます。最大の違いは、これを使用して、ロジックをマークアップから分離することです。

    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };
于 2012-07-25T03:53:10.363 に答える