I created the page that can be saved the multiple locations using laravel, but now i need to edit and update location data and display it in the same page without refreshing the page. this is my html form

<form action="" method="post" id="edit_form">
                    <input type="hidden" name="address_id" value="">
                    <div id="pac-container">
                        <div >
                            <input type="location" id="edit-pac-input" name="address" placeholder="Edit Location Name" autofocus >
                        </div>
                        <input type="hidden" readonly  name="lat" value="{{22.3039}}">
                        <input type="hidden" readonly  name="lang" value="{{70.8022}}">
                    </div>
                    <div id="edit-map" ></div>

                <div >
                    <label for="">
                        {{__('Set Location Type')}}
                    </label>
                    <div >
                        <label >
                            <input type="radio" name="location_type" value="home"  checked="">
                            <span >{{__('HOME')}}</span>
                        </label>
                        <label >
                            <input type="radio" name="location_type" value="office" >
                            <span >{{__('OFFICE')}}</span>
                        </label>
                        <label >
                            <input type="radio" name="location_type" value="other" >
                            <span >{{__('OTHERS')}}</span>
                        </label>
                    </div>
                </div>
                <div >
                    <button type="button" onclick="updateAddress()" >{{__('Edit Address')}}</button>
                </div>
            </form>

this is the jquery function

function updateAddress()
{
    var formData = new FormData($('#edit_form')[0]);
    $.ajax({
        headers:
        {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: "POST",
        url:base_url '/update_address',
        data:formData,
        cache:false,
        contentType:false,
        processData:false,
        success: function(result) {
            if (result.success == true) {
            
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Address Updated Successfully!'
            })
            
            
        }
        else{
        }
    },
    error: function (err) {
        console.log('err', err)
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'This record is connect with another data!'
        });
    }
});

}

Edit Location Page

I need to update and display this data without page refreshing. How to do that?

CodePudding user response：

remove action from form tag and define your base_url variable. second, make an div tag with an unique attr id and then display your response data into it.

CodePudding user response：

define callback func for returning the updated UI, then make event onclick the submit button for use the callback func, and make sure you removing attribute action="" in the tag <form>. So the page will not refresh after clicking the submit form.