Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

idkwtcms's avatar

JSON data using Jquery to populate table

So I have a form that submits via ajax and brings back the results with jquery, but currently it doesn't populate the table by replacing the one row, it completely replaces it and was wondering where in my jquery I was going wrong with this? Thank you in advance for any help!

         <div class="form-group" id="form-group">
                <div class="container">
                @if(isset($policyinfo))
                <h2>Your Policy Details</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Claims Telephone</th>
                            <th>Policy Wording</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $policyinfo[0] }}</td>
                            <td>{{ $policyinfo[1] }}</td>
                            <td>{{ $policyinfo[2] }}</a></td>
                        </tr>
                    </tbody>
                </table>
                @endif
            </div>


            </div>
        </div>


    </fieldset>
    </form>

And the jquery:

   <script>
  $(function() { 
  $('#policy-documents-search-form').on('submit', function(e) { 
    e.preventDefault();  

    $.ajax({
        type: "POST",
        url: "",
        data: $('#policy-documents-search-form').serialize(), 
        dataType: 'JSON',
        success: function(response) {
            console.log(response); 

            if(response.status == 'ok'){
                $("#form-group").show();
                $("#form-group").empty().append("<td>" + response.policyinfo[0] + "</td>", "<td>" +
                    response.policyinfo[1] + "</td>", "<td><a href=" + response.policyinfo[2] + ">Policy Wording </a></td>");

            }
        },
        error: function(response) {

            printErrorMsg(response.error);

        }
    });
 });
 });

   function printErrorMsg (msg) {
  $(".print-error-msg").find("ul").html('');
     $(".print-error-msg")
    $.each( msg, function( error ) {
        $(".print-error-msg").find("ul").append('<li>'+error+'</li>');
    });
     }
0 likes
1 reply
lostdreamer_nl's avatar

It's here:

$("#form-group").empty()

Also: form-group is the container div you are using, not the table's row.

Change your code to this:

if(response.status == 'ok'){
    $("#form-group").show();
    $("#form-group table tbody tr").html("<td>" + response.policyinfo[0] + "</td> <td>" +
        response.policyinfo[1] + "</td> <td><a href=" + response.policyinfo[2] + ">Policy Wording </a></td>");

}

Please or to participate in this conversation.