Question posted in
You can find the official documentation here.

Laravel 7.24- Jquery and Ajax -Clciking Submit button does not wok – Jquery ajax

I am trying to submit a form using Jquery Ajax. The form shows the data stored in the database, of the same user who logged in. The user should be able to edit the data or delete that completely (resulting in logging out). The problem is I cannot get past the form.

There are two buttons- Edit and Delete

My intention is that clicking Edit takes me to a new form page with prefilled data where only the (logged in) user can edit the data and the new data can be updated in database.

Here are the codes-

The blade form (after the user has logged in)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

      <!-- CSRF Token Meta Added -->
      <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- Ajax script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>


    <!-- Sweet Alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


    </head>
  <body>
    <!-- Navigation Bar --> 
   <div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-sm  bg-dark navbar-dark navbar-fixed-top">
  <a class="navbar-brand" href="index">User Info</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>

    
  </ul>
  <ul class="nav navbar-nav navbar-right">
  <li class="nav-item"><a class="nav-link" href="{{url('logout')}}"> Logout</a></li>
      

    </ul>

  
</nav>
    </div>
  </div>

 @if(isset(Auth::user()->email))
<div class="alert alert-success text-center" role="alert">

 Welcome<strong> {{Auth::user()->first_name}}!</strong> You are Logged In.
 
</div>
<div class="alert alert-info text-center" role="alert">

 Here are your details. You can <strong>edit</strong> and <strong>delete</strong> your data from here.
</div>

<form class="form-group" id="new_user_form"  autocomplete="off">
 <div class="row  m-5 p-5 bg-success text-white">
     <div class="col">
<div class="form-group">
  @csrf
  <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
  <input type="hidden" name="id" id="id" value="{{Auth::user()->id}}" readonly>

 <label for="fname">First Name:</label>
 
  <input type="text" class="form-control" id="first_name" name="first_name" value="{{Auth::user()->first_name}}" readonly >
</div>
<div class="form-group">
 <label for="lname">Last Name:</label>
  <input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}" readonly>
</div>
<div class="form-group">
 <label for="email">Email/Username:</label>
 <input type="text" class="form-control" name="email" id="email" value="{{Auth::user()->email}}" readonly>
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="text" class="form-control" name="password1" id="password1" value="{{'**** For security, your password is hidden****'}}" readonly>
  <input type="hidden" class="form-control" name="password2" id="password2" value="{{Auth::user()->password}}" readonly>
</div>

  <div class="form-group">
 <label for="mobno">Mobile Number:</label>
 <input type="text" class="form-control" name="mobno" id="mobno" value="{{Auth::user()->mobno}}" readonly>
</div>
<div class="form-group">
 <label for="dob">Date of Birth(in YYYY-MM-DD):</label>
  <input type="text" class="form-control" name="dob" id="dob" value="{{Auth::user()->DOB}}" readonly>
</div>

<div class="form-group">
  <label for="gender">Gender:</label>
 <input type="text" class="form-control" name="gender" id="gender" value="{{Auth::user()->gender}}" readonly>

 </div>
  <div class="form-group">
  <label for="address">Address:</label>
 <textarea class="form-control" rows="5" name="address" id="address" readonly>{{Auth::user()->address}}</textarea>
</div>

<div class="form-group">
<label for="country">Country:</label>
 <input name="country" class="form-control" id="countrylist" value="{{Auth::user()->country}}" readonly>
</div>

 <div class="form-group">
 <label for="dt">Date and Time of Submission:</label>
   <input type="text" class="form-control" name="dt" id="dt" value="{{Auth::user()->created_at}}" readonly>
</div>

<div class="form-group text-center ">
<a href="edit_user"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>

</div>

</div>

</form>

</div>   
 


<script type="text/javascript">
  $(document).ready(function(){
     $('#edit_user_button').click(function (e){
      
        e.preventDefault();
        $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
      });  

        $.ajax({
           method='POST',
           url='/edit_user',
           cache: false,
           processData:true,   //Required
           contentType: 'application/x-www-form-urlencoded',
            data:    {
                   '_token'             :    $("#csrf").val(),
                  'first_name'         :    $('#first_name').val(),
                   'last_name'         :    $('#last_name').val(),
                  'email'             :    $('#email').val(),
                  'password'           :    $('#password').val(),
                   'mobno'              :    $('#mobno').val(),
                   'dob'                 :     $('#dob').val(),
                  'gender'              :     $('#gender').val(),
                  'address'              :       $('#address').val(),
                   'country'              :       $('#countrylist').val(),
                   'dt'                  :        $('#dt').val(),          
                   },

          dataType="JSON",
          success:function(response){
                  window.location="edit_user_details";
          },
          error:function(){
            error: function(){
              swal({
             title: "Error in Editing",
             text: "Please try again later! ",
             icon: "warning",
            button: "Okay",
            });
            
             }
            


         }


        });


    });
  });


</script>

@endif


<!-- Unauthenticated users are kicked out -->

  @if(!isset(Auth::user()->email))
 <!-- <a href="{{url('logout')}}"/> <button type="button" class="btn btn-danger btn-lg btn-block">Unauthorised user! Please login or signup before you can enter this page</button>   -->

 <script type="text/javascript">window.location="login"</script>

@endif
</body>
</html>

The Controller

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use DB;
use IlluminateSupportFacadesValidator;
use IlluminateSupportFacadesHash;
use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesSession;

class Edit_Loggedin_User extends Controller
{
     public function edit_details_page(){
        $user=Auth::user();
        return response()->json(
            [
                'success' => true,
                
            ]
        );
        
     }
    public function update_loggedin_user(Request $request){
        $user=Auth::user();
    if (Auth::check()) {
        //Some code to be written      

            }
    }
}

Here is where the user should be directed after clicking the edit button

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

     <!-- CSRF Token Meta Added -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
       <!-- Ajax script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <!-- Sweet Alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    </head>

  <body>
    <!-- Navigation Bar -->
   <div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top">
  <a class="navbar-brand" href="index">User Info</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
    
  </ul>
<ul class="nav navbar-nav navbar-right">
  <li class="nav-item"><a class="nav-link" href="{{url('logout')}}"> Logout</a></li>
      

    </ul>
  
  
</nav>
    </div>
   
    </div>

</div>
@if(isset(Auth::user()->email))
<div class="alert alert-success text-center" role="alert">

 Welcome<strong> {{Auth::user()->first_name}}!</strong> You are Logged In.
 
</div>
<div class="alert alert-info text-center" role="alert">
<strong>Edit</strong> your data here
 
</div>

<form class="form-group" id="new_user_form" method="post"  autocomplete="off">
 <div class="row  m-5 p-5 bg-success text-white">
     <div class="col">
<div class="form-group">
  @csrf
  <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
 <label for="fname">First Name:</label>
  <input type="text" class="form-control" id="first_name" name="first_name" value="{{Auth::user()->first_name}}" >
</div>
<div class="form-group">
 <label for="lname">Last Name:</label>
  <input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}">
</div>
<div class="form-group">
 <label for="email">Email/Username:</label>
  <input type="text" class="form-control" name="email" id="email" value="{{Auth::user()->email}}">
</div>

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="text" class="form-control" name="password" id="password" value="{{'**** For security, your password is hidden****'}}">
</div>

  <div class="form-group">
 <label for="mobno">Mobile Number:</label>
  <input type="text" class="form-control" name="mobno" id="mobno" value="{{Auth::user()->mobno}}">
</div>
<div class="form-group">
 <label for="dob">Date of Birth(in YYYY-MM-DD):</label>
  <input type="text" class="form-control" name="dob" id="dob" value="{{Auth::user()->DOB}}">
</div>

<div class="form-group">
  <label for="gender">Gender:</label>
   <input type="text" class="form-control" name="gender" id="gender" value="{{Auth::user()->gender}}">

 </div>
  <div class="form-group">
  <label for="address">Address:</label>
  <textarea class="form-control" rows="5" name="address" id="address">{{Auth::user()->address}}</textarea>
</div>

<div class="form-group">
<label for="country">Country:</label>
 <input name="country" class="form-control" id="countrylist" value="{{Auth::user()->country}}">
</div>

 <div class="form-group">
 <label for="dt">Date and Time of Submission:</label>
  <input type="text" class="form-control" name="dt" id="dt" value="{{Auth::user()->created_at}}">
</div>
<div class="form-group text-center">
<!-- <a href="{{url('recheck_form')}}"/><button type="submit" class="btn btn-primary mb-2 text-center" onclick="store_using_ajax()">Submit</button> -->
</div>
<div class="form-group text-center ">

<a href="#"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>

</div>

</div>

</div>

</form>

</div>   






@endif

<!-- Unauthenticated users are kicked out -->

  @if(!isset(Auth::user()->email))
 <!-- <a href="{{url('logout')}}"/> <button type="button" class="btn btn-danger btn-lg btn-block">Unauthorised user! Please login or signup before you can enter this page</button>   -->

 <script type="text/javascript">window.location="login"</script>

@endif




</body>
</html>

And the routes

Route::get('dashboard','LoginController@loginsuccess')->middleware('auth', 'PreventBackHistory');
Route::get('logout', 'LoginController@logoutsuccess')->middleware('auth','PreventBackHistory');
Route::post('/edit_user', 'Edit_Loggedin_UserController@edit_details_page')->middleware('auth');

Some images here

after user is logged in

loggedin

after edit button is clicked.Notice the URL (it seems like the form is sending data as "GET" and not "POST")

editclicked

If I use method="post" in the form tab, it gives me an error stating

The POST method is not supported in this route

How do I make it work?

Tags:

2

Answers


  1. 0

    You have to define where your form is submitted by using the action attribute:

    <form class="form-group" id="new_user_form" method="post" autocomplete="off" action="{{ url('edit_user') }}">

    LE: another thing I’ve noticed is that your submit button is preceded by a link.:

    <a href="edit_user"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>

    Remove the link and only leave the button as that is the preferred way to submit the form.

    <button type="submit" class="btn btn-warning" id="edit_user_button">
    Edit
</button>

    Update, to submit via AJAX:

    $(document).ready(function() {
    // Setup all AJAX requests to send the CSRF token.
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Prevent the form's regular submission and do it via AJAX instead.
    $('#new_user_form').on('submit', function (e) {

        e.preventDefault();

        var $form = $(this);

        $.ajax({
            method:'POST',
            url: $form.attr('action'),
            cache: false,
            processData: true,   // Required
            data: $form.serialize(), // Serialize all of the form's inputs.
            dataType: 'JSON',
            success: function(response) {
                window.location = 'edit_user_details';
            },
            error: function() {
                error: function() {
                    swal({
                        title: 'Error in Editing',
                        text: 'Please try again later! ',
                        icon: 'warning',
                        button: 'Okay',
                    });
                }
            }
        });
    });
});
    Login or Signup to reply.
  2. 0

    Try not to use Ajax Submission and check. I mean, use the action attribute in the form tag instead

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

Back To Top
Search