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

isthisphoebe's avatar

how to convert ajax jquery response from json?

So I have a search bar that is only for finding someone's policy, and so when they search their policy number, it gives them back some details including claims and policy wording. This all worked fine but worked as a redirect back to the same page just with the details added and so I wanted it to run with ajax so that the search all happens on one page. Currently, I can still search but when I hit submit, all I get is the json response which I can see it's not empty, it has the full order details, I just need to convert that to populate the table and was wondering where I was going wrong?

Routes:

Route:: get('/widgets/policy-wording', 'FrontendWidgets\PolicyWordingController@policyWordingPage');

Route:: any('/search', 'FrontendWidgets\PolicyWordingController@search');

Controller search function:

public function search(Request $request) {

if ($this->validate($request, [
    'ordernumber' => 'string|min:8|max:16',
], [
    'ordernumber.string' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
    'ordernumber.min' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
    'ordernumber.max' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
]));

    try {
    $order = Order::findOrFail(decodeFullOrderNumber($request->ordernumber));
    } catch (ModelNotFoundException $exception) {
        return back()->withError('We could not find this policy number in our system, please try again')->withInput();
    }
    // return view('frontend_widgets.policy_wording', compact('order'), [
    //     'title' => "Policy Wording",
    // ]);

    // $order->save();
    // return response()->json([
    //     view('frontend_widgets.policy_wording', compact('order'), ['title' => "Policy"])->render()]);

    $order->save();
    return response()->json($order);

}

Blade form:

{{ csrf_field() }}
        <div class="form-group">
            <label for="username" class="col-sm-6 control-label">Enter your policy number</label>
            <div class="col-sm-8">
                <input type="text" name="ordernumber" id="ordernumber" class="form-control"/>
                <span class="text-danger">{{ $errors->first('ordernumber') }}</span>
            </div>
        </div>

            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button type="submit" class="btn btn-primary" id="search-button">Search</button>
            </div>
        </div>

         <div class="form-group" id="form-group" style="visibility:hidden;">
                <div class="container">
                @if(isset($order))
                <h2>Your Policy Details</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Claims Telephone</th>
                            <th>Policy Wording</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $order->scheme->Description }}</td>
                            <td>{{ $order->scheme->ClaimsTelephone1 }}</td>
                            <td><a href="{{ $order->scheme->PolicyURL }}">Policy Wording </a></td>
                        </tr>
                    </tbody>
                </table>
                @endif
            </div>


            </div>
        </div>


    </fieldset>
</form>

Blade script:

$(document).ready(function() { $('#submit').on('submit', '#policy-documents-search-form', function (e) { e.preventDefault(); var ordernumber = $('#ordernumber').val(); $.ajax({ type: "POST", url: '{{ url('/search') }}', data: { Description: $('order->scheme->Description').val(), Claims Telephone: $('order->scheme->ClaimsTelephone1').val(), Policy Wording: $('order->scheme->PolicyURL').val() }, dataType: 'JSON', success: function(data) { $("#form-group").show(); $("#form-group").append("{{ $order->scheme->Description }}", "{{ $order->scheme->ClaimsTelephone1 }}", "Policy Wording "); } }); }); });

0 likes
1 reply
Tray2's avatar

You can do or somesuch. I'm not a big fan of jQuery so there might be some better way to do it. .

var response = JSON.parse(your-response-text) ;
$.('selector').val(response.field);

Please or to participate in this conversation.