Ajax post in Laravel blade form not submitting

Question

I'm trying to add some additional data to a form in my laravel blade using js and ajax post, but I can't get the form to submit. I've stripped everything else out to try to find what's wrong, but I'm mystified. Can anyone help? My blade looks like this;

@extends('layouts.app')

@section('content')
 <div class="container">
  <div class="row justify-content-center">
   <div class="col-12 col-md-6 mt-5 mb-2">

    <div class="card">
     <div class="card-body">
      <form id="payment-form">

       <button id="card-button" class="btn btn-lg btn-block btn-success">
        <span id="button-text"><i class="fas fa-credit-card mr-1"></i>{{ __('Add Payment Method') }}</span>
       </button>

      </form>
     </div>
    </div>

   </div>
  </div>
 </div>
@endsection

@section('javascript')

<script>

 const cardButton = document.getElementById('card-button');

 var form = document.getElementById('payment-form');

 cardButton.addEventListener('click', function(event) {
  // event.preventDefault();
  console.log('On click check');

  var payment = '1234';
  $.ajax({
   type: "POST",
   url: "/payment-post",
   data: {
    payment: payment,
    '_token': $('meta[name="csrf-token"]').attr('content'),
   },

  });
 });

</script>
@endsection

Answer 1

You have to use like this

var payment    = '1234';
var CSRF_TOKEN =  $('meta[name="csrf-token"]').attr('content');

$.ajax({
    type: "POST",
    url: "{{url('')}}/payment-post",
    dataType: "text",
    data: {
        payment: payment,
        _token:  CSRF_TOKEN
    },
    success: function (response) {
        //Do something
    }

});

Answer 2

I'm trying to add some additional data to a form in my laravel blade using js and ajax post, but I can't get the form to submit. I've stripped everything else out to try to find what's wrong, but I'm mystified. Can anyone help? My blade looks like this;

@extends('layouts.app')

@section('content')
 <div class="container">
  <div class="row justify-content-center">
   <div class="col-12 col-md-6 mt-5 mb-2">

    <div class="card">
     <div class="card-body">
      <form id="payment-form">

       <button id="card-button" class="btn btn-lg btn-block btn-success">
        <span id="button-text"><i class="fas fa-credit-card mr-1"></i>{{ __('Add Payment Method') }}</span>
       </button>

      </form>
     </div>
    </div>

   </div>
  </div>
 </div>
@endsection

@section('javascript')

<script>

 const cardButton = document.getElementById('card-button');

 var form = document.getElementById('payment-form');

 cardButton.addEventListener('click', function(event) {
  // event.preventDefault();
  console.log('On click check');

  var payment = '1234';
  $.ajax({
   type: "POST",
   url: "/payment-post",
   data: {
    payment: payment,
    '_token': $('meta[name="csrf-token"]').attr('content'),
   },

  });
 });

</script>
@endsection

Answer 3

In the end I tracked this down to 'defer' being present in the script tag in the header, which was stopping all the event listeners from working. Once I changed it to this

<script src="{{ asset('js/app.js') }}"></script>

everything working fine.