The POST method is not supported for route

Question

i just want to send form data on the url given in ajax if there are any post regarding this issue please share with me

I am getting view on routeRoute::get('/MedicalHistory/', [PatientController::class, 'getPatientMedicalHistoryById'])->name('getPatientMedicalHistoryById');

and getting data on route using ajax

Route::get('/getMedicalHistory/{id}', [PatientMedicalController::class, 'show'])->name('getPatientMedicalHistory');

Get JS file

$(function () {('use strict');var patientId = '16220'; // Replace with the actual patient IDvar get_url = window.location.origin + '/private-clinic/patient/patient-Medical-History/                       getMedicalHistory/' + patientId;// Fetch data from Laravel controller$.ajax({url: get_url,method: 'GET',success: function (response) {

        var data = response.data;
        var userid = response.patientID;
        $('#family_History').val(data.family_history);
        $('#smoking_History').val(data.smoking_history);
        $('#Immunizations_History').val(data.Immun_history);
        $('#Allergies_History').val(data.Allergy_history);
        $('#patient_id').val(userid.user_id);
        //console.log(JSON.stringify(userid.user_id));
    },
    error: function (error) {
        console.error('Error:', error);
    }
});

//Edit btn makes textareas enabled
$('#edit').click(function(event) {
    event.preventDefault(); // Prevent the default behavior of the button click
    $('#save').css('display', 'block');
    $('#edit').css('display', 'none');
    $('#family_History, #smoking_History, #Immunizations_History, #Allergies_History').prop('disabled', false);
  });

});

---

HTML Form

        @csrf
        

    <div class="row">
      <div class="col-md-12 mb-2">
        <div class="fw-bolder fs-5 mt-2">Family History</div>
        <hr>
        <textarea disabled required value="" type="text" name="family_History" id="family_History" class="form-control" placeholder="Complete Family History" rows="4" cols="50"></textarea>
      </div>

      <div class="col-md-12 mb-2">
        
        <div class="fw-bolder fs-5 mt-2">Smoking History</div><hr>
        <textarea disabled required value="" type="text" name="smoking_History" id="smoking_History" class="form-control" placeholder="Complete Smoking History"  rows="4" cols="50"></textarea>
      </div>
      <div class="col-md-12 mb-2">
        <div class="fw-bolder fs-5 mt-2">Immunizations</div><hr>
        <textarea disabled required value="" type="text" name="Immunizations_History" id="Immunizations_History" class="form-control" placeholder="Complete Immunizations History"  rows="4" cols="50"></textarea>
      </div>
    
      <div class="col-md-12 mb-2">
        <div class="fw-bolder fs-5 mt-2">Allergies</div><hr>
        <textarea disabled required value="" type="text" name="Allergies_History" id="Allergies_History" class="form-control" placeholder="Complete Allergies History"  rows="4" cols="50"></textarea>
      </div>
      
      <div class="col-md-12 mb-2">
        <div class="float-end">
       <button id="edit" name="edit" class="border-0 text-white rounded-pill px-3 bg-primary"> Edit</button>
       <button style="display: none;" id="save"  name="save" class="border-0 text-white rounded-pill px-3 bg-primary"> Save123</button>
       </div>
    </div>
      
    </div>
 
  </form>

---

when i click on save btn it shows error

The POST method is not supported for route private-clinic/patient/patient-Medical-History/MedicalHistory. Supported methods: GET, HEAD.

---

this is my save js file

$(function () {('use strict');var patientId = '16220';var save_url = window.location.origin + '/private-clinic/patient/patient-Medical-History/SaveHistory/' + patientId;

$('#save').click(function(){
    $('#save').css('display', 'none');
    $('#edit').css('display', 'block');
   
    var familyHistory = $('#family_History').val();
    var smokingHistory = $('#smoking_History').val();
    var ImmunizationsHistory = $('#Immunizations_History').val();
    var Allergies = $('#Allergies_History').val();
    var method = patientId ? 'PUT' : 'POST';
    $.ajax({

        url: save_url,
        method: method,
        data: { 
            family_history: familyHistory,
            smoking_history: smokingHistory,
            Immun_history: ImmunizationsHistory,
            Allergy_history: Allergies
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            $('#family_History, #smoking_History, #Immunizations_History, #Allergies_History').prop('disabled', true);
            console.log(response.message);
        },
        error: function (error) {
            console.error('Error:', error);
        }
    });
});

});

---

web.php

// Patient Mediacal HistoryRoute::group(['prefix' => 'patient-Medical-History', 'name' => 'patient-Medical-History.', 'as' => 'patient-Medical-History.'], function () {Route::get('/getMedicalHistory/{id}', [PatientMedicalController::class, 'show'])->name('getPatientMedicalHistory');Route::post('/SaveHistory/{id}', [PatientMedicalController::class, 'update'])->name('savePatientMedicalHistory');Route::get('/MedicalHistory/', [PatientController::class, 'getPatientMedicalHistoryById'])->name('getPatientMedicalHistoryById');

        });

i've tried many things, but it get error

Answer 1

rather than using $('#save').click you need to overwrite the submit event of your form. Something like:

$(".edit-form").submit(function(e) {
  e.preventDefault(); // avoid submitting the form.

  ... ajax submit code

what is happening is that your form is submitting along side your ajax post, but since your form likely has no action attribute, your form is submitting on your current url, your index route.