I am using laravel and ajax to update records from table. Currently, the records are successfully being updated but somehow a refresh is triggered, making the ajax feature useless. i need a way to just post the form to update my database record without refreshing the page.

The following is my code.

View File Ajax

        $(document).on("click", "#primaryButton", function(e) {
         e.preventDefault(); // Prevent Default form Submission
        $.ajax({
            type: "post",
            url: "{{ route('event-qr-post') }}",
            data: $("#message").serialize(),
            success: function(store) {
                location.href = store;
                console.log("success!");
                console.log(location.href);
                console.log($("#message").serialize());
            },

            error: function() {
                console.log("fail");
            }
        }).done(function(store) {
            console.log("itsdone");
        });
        // e.preventDefault();
        return false;
    });

View File Submit Form

 <form enctype="multipart/form-data" id="message">
            @csrf
            <div >
                <div id="ref-lookup">
                    <label style="font-size: 22px; font-weight: 700;margin-block:10px;" for="eventTitle">Reference
                        number</label>
                    <input id="id" name="id" value="{{ '' }}" required>
                    {{-- <input type="hidden" name="name" value="{{ $eid->name }}" required> --}}
                    <input type="hidden" name="staffName" value="{{ $sid->name }}" required>
                    <input type="hidden" name="submitType" id="submitType" value="">
                    <input type="hidden" name="pageType" id="pageType" value="{{ $type }}">
                    {{-- <input type="hidden" name="guestLeft" id="guestLeft" value=""> --}}
                    <div style="display:flex;justify-content:space-between;gap:10px">
                        <button type="button" style="background-color:green"
                            onclick="findGuest(document.getElementById('id').value);">Find Contact</button>
                        <button id="addGuest" type="button" style="background-color:red" onclick="addGuests();">Add a
                            Replacement</button>
                    </div>
                </div>

                <div id="guestForm">

                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">First Name</label>
                        <input id="guestFirstName" name="first_name" value="">
                    </div>
                    <div >

                        <label for="" style="width:120px; margin-top:10px; ">Last Name</label>
                        <input id="guestSurname" name="last_name" value="">
                    </div>
                    <div >

                        <label for="" style="width:120px; margin-top:10px; ">Email</label>
                        <input id="guestEmail" name="email" value="">
                    </div>

                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">Company</label>
                        <input id="companyName" name="company" value="">
                    </div>
                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">Job Title</label>
                        <input id="guestTitle" name="title" value="">
                    </div>
                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">Tel</label>
                        <input id="guestPhone" name="tel" value="">
                    </div>
                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">Country</label>
                        <input id="guestCountry" name="country" value="">
                    </div>
                    <div >
                        <label for="" style="width:120px; margin-top:10px; ">Notes</label>
                        <input id="guestNotes" name="notes" value="">
                    </div>
                    <button type="button"  id="primaryButton">
                        Submit
                        <span ></span>
                    </button>

                </div>
            </div>

Controller

    public function post_eventQR_attendance(Request $request)
    {

        // $ins = $request->all();
        // unset($ins['_token']);
        // dd($ins);
        $User = MasterTempAward::where('id', $request->get('id'))->first();
        $User->modified_by = $request->get('staffName');
        $User->attended = "Yes";
        $User->time = Carbon::now();
        $User->business_card = "";
        $User->save();
}

CodePudding user response：

Your page is being refreshed because of the location.href = store; that you passed after the ajax request receives a success response. location.href redirects the webpage to the specified URL.

So change your Ajax code to this:

$(document).on("click", "#primaryButton", function(e) {
         e.preventDefault(); // Prevent Default form Submission
        $.ajax({
            type: "post",
            url: "{{ route('event-qr-post') }}",
            data: $("#message").serialize(),
            success: function(store) {
                // location.href = store;
                console.log("success!");
                // console.log(location.href);
                console.log($("#message").serialize());
            },

            error: function() {
                console.log("fail");
            }
        }).done(function(store) {
            console.log("itsdone");
        });
        // e.preventDefault();
        return false;
    });