1

フォームに 3 つの入力テキスト ボックスがあります。

1 つ目は教師、2 つ目は学年です。これで 3 番目の入力テキスト ボックスができました。JavaScript を使用して、これら 2 つの値から "(先生) の (X) クラス" として値を動的に更新する必要があります。

コードを書くのを手伝ってくれる人はいますか? 前もって感謝します。

ここにjqueryコードがあります：

<script type="text/javascript">
  $(document).ready(function(){
    $('#both').value($('#teacher').val() + "'s " + $('#grade').val());
});

  </script>

私の入力タグは次のとおりです。

<input type="text" name="teacher_name" id="teacher" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="grade" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="both" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">

3 番目の入力フィールドを更新するために追加する必要があるものは何ですか。

4

3 に答える 3

1

jQuery を使用している場合、dom の準備ができたら 3 番目のものを更新するのは非常に簡単です。

$(document).ready(function(){
    $('#third').value($('#first').val() + "' " + $('#second').val());
});
于 2012-06-23T06:23:39.057 に答える
1

onChange入力内容が変化したときにonBlurトリガーされるイベント、または入力がフォーカスを失ったときにトリガーされるイベントを使用します。

function UpdateInfo()
{
  var teacher = document.getElementById('teacher').val();
  var grade = document.getElementById('grade').val();
  var info = teacher + '\'s '+ grade + ' class';
  document.getElementById('info').value = info;
}

/* Solution 1 (onChange) */
<input id="teacher" type="text" onChange="UpdateInfo();" />
<input id="grade" type="text" onChange="UpdateInfo();" />
<input id="info" type="text" />

/* Solution 2 (onBlur) */
<input id="teacher" type="text" onBlur="UpdateInfo();" />
<input id="grade" type="text" onBlur="UpdateInfo();" />
<input id="info" type="text" />

または、jQuery を使用して、イベントでdocument.readyイベントをバインドできます。

$(document).ready(function()
{
    /*
    * binding onChange event here
    * you can replace .change with .blur
    */
    $('#teacher').change(UpdateInfo);
    $('#grade').change(UpdateInfo);
});

   function UpdateInfo()
   {
     var teacher = $('#teacher').val();
     var grade = $('#grade').val();
     var info = teacher + '\'s '+ grade + ' class';
     $('#info').val(info);
   }

<input id="teacher" type="text" />
<input id="grade" type="text" />
<input id="info" type="text" />

デモ

于 2012-06-23T07:16:24.797 に答える
0

JavaScript を使用すると、次の方法を試すことができます。

var first_val=document.getElementById('first').val();

var second_val=document.getElementById('second').val();

document.getElementById('third').val(first_val + second_val);
于 2012-06-23T06:29:25.960 に答える