Question posted in
You can find the official documentation here.

Jquery ajax – AJAX Post twice in Laravel framework

i was searching in stackoverflow with the same title, but i got no luck.. this is my ajax script

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });

    $('#btn-submit').on('click', function(e)
    {
        e.preventDefault();
        var nama_kelompok_jalan = $('input[name="nama"]').val();
        var action = $('#csrf-token').attr('action');
        $.ajax({
            type:'POST',
            url:action,
            data:{nama:nama_kelompok_jalan},
            success:function(data){
                alert(data.success);
                location.reload();
            },
            error: function () {
                alert('Tidak ada pelanggan yang dipilih');
            }
         });
    });

here my controller

public function store(Request $request)
    {
        $name    = $request->nama;
        $nometer = $request->nometer;

        $kelompok       = new Kelompok;
        $kelompok->nama = $name;
        $kelompok->save();
        return response()->json(['success'=>'Data Kelompok telah tersimpah..']);
    }

and this is my blade

              <input type="hidden" action="{{route('kelompok.store')}}" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                <div class="kt-portlet__body">

                    {{-- <div class="form-group form-group-last">
                        <div class="alert alert-secondary" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning kt-font-brand"></i></div>
                            <div class="alert-text">
                                The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
                            </div>
                        </div>
                    </div> --}}
                    <div class="form-group">
                        <label>Nama Kelompok</label>
                        {{Form::text('nama', '', ['min'=>'1','max'=>'30','class'=>'form-control','placeholder'=>'E.g: Juanda','required'])}}
                    </div>
                </div>
                <div class="kt-portlet__foot">
                    <div class="kt-form__actions">
                        <button id="btn-submit" type="btn" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>

        </div>

which is i dont use laravel form to avoid double post from laravel and ajax, but i still got double post, i try inspect element in network section my script load just one not twice, i try console.log response data from controller just one, but in mysql i got two new insert data with same value..
any sugestion for me??, thank you…

one more mistery.. in my development environment on my laptop is working properly, this is on server with production environment, both have php 7.3 with same configuration on php.ini

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    i solved my problem with remove this location.reload();

    i dont know why... ahahaha, thank you everybody..


  2. 0

    The part type="btn" is invalid. You should try with type="button". It’s probable that because of the invalid button type, the button is interpreted as a submit button.

    The code should be

    <button id="btn-submit" type="button" class="btn btn-primary">Submit</button>

    You probably mixed it up with the Bootstrap classes.

    Login or Signup to reply.
  3. 0

    There is a couple of changes you need to make

    <button id="btn-submit" type="btn" class="btn btn-primary" onClick="submitForm()">Submit</button>

    And then in your javascript

    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
    }
});

function submitForm() {

    var nama_kelompok_jalan = $('input[name="nama"]').val();
    var action = $('#csrf-token').attr('action');
    $.ajax({
        type: 'POST',
        url: action,
        data: {
            nama: nama_kelompok_jalan
        },
        success: function (data) {
            alert(data.success);
            location.reload();
        },
        error: function () {
            alert('Tidak ada pelanggan yang dipilih');
        }
    });


}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search