Encountering an issue with the Laravel framework that lists available methods as: GET

I am encountering an issue while attempting to submit a form using ajax. The error message

The POST method is not supported for this route. Supported methods: GET, HEAD.
keeps appearing. Despite searching on platforms like Stackoverflow, no solution seems to work for me. How can I resolve this issue?

The Blade file

<form method="POST" enctype="multipart/form-data">
    <input type="hidden" value="{{csrf_token()}}" id="token"/>

  <div class="form-group" >
     <label for="title">Title</label>
     <input type="text" name="title" >
  </div>

  <div class="form-group">
     <label for="description">Description</label>
     <input type="text" name="description">
  </div>
<button type='submit' id="btn" >submit

</form>

Javascript code snippet

<script>

$(document).ready(function(){
$("#btn").click(function(event){
event.preventDefault();
var url = '{{ route('review.store') }}';
var form = $('form')[0];
var formData = new FormData(form);

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 }
});

$.ajax({
    url: url,
    data: formData,
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){
    if($.isEmptyObject(data.error)){
    $("#msg").html("successfull");
    $("#msg").fadeOut(3000);
     }
    }
});
});

});
</script>

Route Configuration

Route::post('review', 'ProductReviewController@store')->name('review.store');

Answer №1

In javascript, it is not possible to use a single quote ' inside double quotes "". Make sure to enclose your data in double quotes instead.

Modify

var link = '{{ url('register') }}';

to

var link = "{{ url('register') }}";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for combining multiple text box values into a single text box?

I need assistance with concatenating multiple text box values into one dynamic text box. I am currently retrieving values using IDs, which are dynamically added as the text boxes are dynamically created. However, when using a for loop to dynamically add te ...

The process of binding two variables in the same select element

Here is the code snippet that I am working with: <div class="form-group "> <label for="field_type"><b>Type</b></label> <div class="input-icon right"> <select required class="form-control" ...

What is the best way to dynamically load a view within a modal based on the clicked link?

I'm looking to optimize the loading of views inside a modal for various operations. Instead of having three separate modals, I want to dynamically load the views based on the link that is clicked. How can I achieve this? Or should I create individual ...

``In JavaScript, the ternary conditional operator is a useful

I am looking to implement the following logic using a JavaScript ternary operation. Do you think it's feasible? condition1 ? console.log("condition1 pass") : condition2 ? console.log("condition2 pass") : console.log("It is different"); ...

What is the best method for incorporating headers and custom server-side .js in an express.js / node.js application?

Recently, I've been working on developing a data-driven HTML site specifically tailored for developers at our company. The main concept involves setting up a server using node.js v0.12+ / express v4+ to handle various functions for accessing a large d ...

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

After conducting my research, it seems that the most effective way to set the final value of a CSS grid is either by directly specifying it or by creating/manipulating the css :root value. A similar query was previously raised here, although the answers p ...

Utilizing URL-based conditions in Reactjs

Currently, I am working with Reactjs and utilizing the Next.js framework. My goal is to display different text depending on whether the URL contains "?id=pinned". How can I achieve this? Below is the snippet of my code located in [slug.js] return( ...

When trying to revert back to the original content after using AJAX to display new HTML data, the .html() function

Here is the JavaScript I am using to handle an ajax request: $(document).ready(function() { // Variable to hold original content var original_content_qty = ''; $('.product-qty-<?php echo $products->fields[' products_id ...

How do I effectively implement persistent Ajax functions within a GridView using YII2?

After successfully implementing an ajax function within a grid row, whether triggered by a button or link in a specific cell, everything runs smoothly. However, once the grid is updated via Ajax - either through sorting or filtering - these functions cea ...

Create a customized template using the resolve feature in the $stateProvider

Take a look at this code snippet: bank.config(function($stateProvider) { $stateProvider .state('main.bank', { url: '/', controller: 'BankCtrl', resolve: { money: function(bankResource) { ...

Modify the wording of the stock market text

Would greatly appreciate it if someone could assist me. I have a limited understanding of jquery/js and am facing difficulty in accomplishing this task. I am looking to change the text "Out of stock" to "In stock," but only when the key is "1." These tex ...

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

I've been working on an AngularJS app for about a week now, developing a backoffice application for my service. My main challenge lies in using data retrieved from a remote server. I have 4 HTTP GET requests in my app - 2 of them fetching lists of us ...

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

I'm currently utilizing a REST web service within Express and I am looking to retrieve an object that includes the specified hours. var express = require('express'); var router = express.Router(); /* GET home page. ...

Zod: ensure at least one field meets the necessary criteria

Currently, I am in the process of developing a form that allows users to input either their email address or phone number. While they have the option to provide both, they are required to enter both before proceeding. For this project, I am utilizing Zod a ...

Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS: transform: scale(X,Y) The issue I am encountering lies in determining the c ...

Animating with CSS3 triggered by JavaScript

Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degr ...

Is there a way to implement a collapse/expand feature for specific tags in React-Select similar to the "limitTags" prop in Material UI Autocomplete?

Utilizing the Select function within react-select allows me to select multiple values effortlessly. isMulti options={colourOptions} /> I am searching for a way to implement a collapse/expand feature for selected tags, similar to the props fun ...

Experiencing problems with website loading due to jquery?

Recently, I've been experiencing slow loading times on my website . It's taking about a minute for the site to load properly, but strangely, if I click on the stop loading button, the site loads instantly. Does anyone have any insight into what ...

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...