1

私は少なくとも200の入力フィールドを持つ巨大なフォームを持っています- text/radio/checkboxes。

私はこれをいくつかのセクションに分割して適切に構成しました。各セクションには、ユーザー入力を受け取り、それをデータベースに保持する更新ボタンがあります。これはAjaxによって行われるため、ページをリロードする必要はありません。

<span>ページをリロードせずに、ユーザーが入力したものを使用して、入力フィールドに対応するを簡単に更新するにはどうすればよいですか？$("#spanid").html($("#input1").val())各アイテムに対してを行う<span>必要がありますか、それともこれを行う簡単な方法はありますか？

フォームの一部のコードは次のとおりです。

HTML

 <form id="history" name="history" action="" method="post"> 
 <table class="normal">
        <tr><th colspan="8">HISTORY</th>
        </tr>
        <tr><td style="width:200px"><b>Chief Complaint Location</b></td>
        <td style="width:450px"><b>Comment</b></td>
        <td><b> Previous</b> </td>
        </tr>
        <tr><td>Head</td>
            <td ><input type="text" maxlength="100" name="headH" id="headH" ></td>
            <td class="data2"><span id="headSpan"><%=msmtCommentHead%></span></td>
        </tr>
        <tr><td>Neck</td>
            <td><input type="text" maxlength="100" name="neckH" id="neckH" ></td>
            <td class="data2"><span id="neckSpan"><%=msmtCommentNeck%></span></td>
        </tr>
        <tr><td>Upper Extremeties</td>
            <td><input type="text" maxlength="100" name="upperExtremetiesH" id="upperExtremetiesH"></td>
            <td class="data2"><span id="ueSpan"><%=msmtCommentUpperExtremeties%></span></td>
        </tr>
        <tr><td>Thoracic Spine</td>
            <td><input type="text" maxlength="100" name="thoracicSpineH" id="thoracicSpineH"></td>
            <td class="data2"><span id="tsSpan"><%=msmtCommentThoracicSpine%></span></td>
        </tr>
   <tr><td><input type="button" id="submitHistory" value="Update"/></td></tr>
   </table>
   </form>

Javascript：

   $(function(){
$("#submitHistory").click(function() {
    var query = $("#history").serialize();
        $.ajax( {
          type: "POST",      
          url: "/oscar/cmcc/History.do",
          dataType: "json",
          data: query  
         }); 
        document.getElementById('history_cmcc').reset();
        var date = new String("<%=date%>");
        $("#headSpan").innerHTML = $("#headH").val()+ "," + date; 

        $("#neckSpan").innerHTML = $("#neckH").val() + ","+ date; 


        $("#tsSpan").innerHTML = $("#thoracicSpineH").val() + ","+ date; 

        $("#lsSpan").innerHTML = $("#lumbarSpineH").val() + ","+ date; 

        $("#leSpan").innerHTML = $("#lowerExtremetiesH").val() + ","+ date; 

        $("#chSpan").innerHTML = $("#chestHeartH").val() + ","+ date; 
   }

ありがとう！

4

2 に答える 2

5

一般的に、これを行うことができます：

$('input[type=text]').each(function() {
  $(this).closest('tr').find('span').html($(this).val());
});

$('input:checked').each(function() {

         $(this).closest('tr').find('span').html($(this).val());
});

OPコメントごとの更新：

あなたの例では、ラジオボタンの左側にあるラベルをスパンの内側に配置したい場合、これを行うことができます。これは、特定の要件によって異なります。

$('input[type=radio]:checked').each(function() {  
     $(this).closest('tr').find('span').html($(this).closest('tr').find('td:eq(0)').text());    
});
于 2012-06-02T15:42:53.757 に答える
0 
$(':input').each(function() {
  $(this).closest('tr').find('span').html(this.value);
});

:inputすべての入力に適用されます。も使用できますinput。

于 2012-06-02T15:46:55.703 に答える