Question

I have a huge form with at least 200 input fields- text/radio/checkboxes.

I have divided this into several sections to structure it well and there is an update button for each section which takes the user input and persists it to the db. This is done by Ajax so I don’t have to reload the page.

How can I easily update the <span>s corresponding to the input fields with whatever the user inputs without reloading the page? DO I have to do a $("#spanid").html($("#input1").val()) on each <span> item or is there an easy way to do this?

Here’s the code for a fraction of the form.

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

Thanks!

Answer 1

In general you can do this:

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

Update per OP comment:

In your example if you wanted to put the label that is to the left of a radio button inside the span you could do this. This depends on your specific requirements.

$('input[type=radio]:checked').each(function() {  
     $(this).closest('tr').find('span').html($(this).closest('tr').find('td:eq(0)').text());    
});