Ajax Post Data Form without refreshing

Question

Firstly, I've been stuck between method and type as if I've defined method in form so I don't have to define it in ajax, and if so? ajax gives undefined in console.

Secondly, The following code gives 405 POST method not allowed .

Also, When I do succeed trying bunch of things ajax refreshes the whole page, I want to post data to server without refreshing the page.

Any help would do!!

Controller Function

public function storeDevSkill(Request $request, $user_id)
{
    $this->validate($request,
        [
            'dev_skill_name' => 'required',
            'dev_skill_exp' => 'required',
        ]);

    try {
        $data = array(
            'dev_id' => $user_id,
            'dev_skill_name' => $request->dev_skill_name,
            'dev_skill_exp' => $request->dev_skill_exp,
        );
        DevSkill::create($data);
        return back();
    } catch (\Exception $exception) {
        return back()->withError($exception->getMessage())->withInput();
    }
}

Route:

    Route::post('/developer/create/skill/{user_id}', 'SuperAdminControllers\DeveloperController@storeDevSkill')->name('store.developer.skill');

Form:

<form id="form_skill" method="POST" enctype="multipart/form-data" action= "{{route('store.developer.skill',$user->user_id)}}">

Button:

<button type="submit" id="addskillSubmit" value="{{$user->user_id}}" style="display: none;" class="btn btn-primary">Save</button>

Script:

<script>
    $(document).ready(function () {
        $('#form_skill').on('submit', function (event) {
            console.log("Ajax Call")
            event.preventDefault();
            var action_url = '';
            var user_id = $(this).attr('value');
            console.log(action_url)

            $.ajax({
                url: action_url,
                type: "post",
                data: $(this).serialize(),
                // dataType: 'json',

                success: function (response) {
                    if (response.error) {
                        console.log('Ajax Success')
                    } else {
                        // var table = $('#addskilltable').DataTable();
                        // table.ajax.reload();
                        console.log(response.success)
                    }
                }
            });
        });
    });
</script>

Answer 1

You need to pass action attribute from the form to your ajax call like so

<script>
  $(document).ready(function () {
    $('#form_skill').on('submit', function (event) {
      event.preventDefault();
      $.ajax({
        url: $(this).attr('action'),
        type: "post",
        data: $(this).serialize(),
        dataType: 'json',

        success: function (response) {
          if (response.error) {
            console.log('Ajax Success')
          } else {
            console.log(response.success)
          }
        }
      });
    });
  });
</script>

Give it a try and see if that changes anything.

Answer 2

$(document).on('submit', '#form_skill', function(e){

e.preventDefault();

var nFormId = '#'+ $(this).attr('id');
var formData = $(this).serialize();
var url = $(this).attr('action');
$.ajax({
          type: "POST",
          url: url,
          data: formData,
          success: function (response) {
            console.log(response);
            $(nFormId)[0].reset();
          },
          error: function (jqXHR, exception) {

          },
          beforeSend: function () {

          },
          complete: function () {

        }
});

});

Hope this answer help you.