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