Ajax is not submitting the form after button click

Question

I have this form here I am trying to send data to the controller using Ajax but something keeps failing and ajax is not working at all. I am trying to insert a question and sending the quiz id through the form and to the controller

<div id="form_two" class="container col-sm-8">
    <div class="row card border-secondary align-items-center">
        <div class="form-group col-sm-7">
            <br><br>
            <form id="report">
                @csrf
                <input type="hidden" name="quizTest" value="{{ \Illuminate\Support\Facades\Session::get('testID') }}">
                <input class="form-control" id="question" type="text" name="question" placeholder="Question" size="40" required><br>
                <input class="form-control" id="answerA" type="text" name="answerA" placeholder="Option A" size="40" required><br>
                <input class="form-control" id="answerB" type="text" name="answerB" placeholder="Option B" size="40" required><br>
                <input class="form-control" id="answerC" type="text" name="answerC" placeholder="Option C" size="40" required><br>
                <input class="form-control" id="answerD" type="text" name="answerD" placeholder="Option D" size="40" required><br>
                <input class="form-control" id="correct_answer" type="text" name="correct_answer" placeholder="Correct Answer" size="40" required><br>
                <button class="btn btn-primary" id="registraion-form" >ADD A QUESTION </button>
            </form>
        </div>
    </div>
</div>

Here is my ajax code that I am trying to send data to the /test endpoint, but when I am submitting the form nothing is printing on the console.log and nothing is being returned from the response from the controller which leads to the conclusion that ajax is not working. When I am pressing the submit button only the URL is changing, what I am doing wrong?

$('#registraion-form').click(function (e) {
    e.preventDefault();
    let question = $("input[name=question]").val();
    let answerA = $("input[name=answerA]").val();
    let answerB = $("input[name=answerB]").val();
    let answerC = $("input[name=answerC]").val();
    let answerD = $("input[name=answerD]").val();
    let quizTest = $("input[name=quizTest]").val();
    let correct_answer = $("input[name=correct_answer]").val();
    $.ajax({
        type: "POST",
        url: "/test",
        data : {
            quizTest: quizTest,
            question : question,
            answerA:answerA,
            answerB:answerB,
            answerC:answerC,
            answerD:answerD,
            correct_answer : correct_answer
        },
        success: function(response) {
            console.log(response);
            console.log(response.message);
            $("#report")[0].reset();
        },
        error : function (error) {
            console.log(error);
        }
    })
})

score 0 · Answer 1 · answered May 04 '21 at 21:26

0

just because you have added @csrf to your form, doesn't mean that you're ok on everything.

Since AJAX is submitting a POST request, also that request should have with it the csrf token, otherwise it won't work.

Check for example this question.

answered May 04 '21 at 21:26

Alberto Sinigaglia

12,097
2
20
48

Thanks for the answer Berto but that is not the case the path url is not excluded for CSRF verification . p.s i have added the csrf but still the same result – Thymeleaf May 04 '21 at 21:30
`the path url is not excluded for CSRF verification` yes, that's the problem – Alberto Sinigaglia May 04 '21 at 21:33
you are sending a post request to an endpoint that requires CSRF token validation – Alberto Sinigaglia May 04 '21 at 21:33
I am doing the oppsite actually i am sending a post request to an endpoint that does not need CSRF token validation – Thymeleaf May 04 '21 at 21:35
citing your words: `path url is not excluded`. This means that the endpoint IS INCLUDED in the ones that requires validation, please try adding the CRSF token to the AJAX and try again – Alberto Sinigaglia May 04 '21 at 21:36
btw `console.log(error);` you should see the error on your console – Alberto Sinigaglia May 04 '21 at 21:36
I added the csrf but still the same result , and console.log(error) is not reachable as i told you ajax is not working at all. – Thymeleaf May 04 '21 at 21:38
@Thymeleaf what happens when you press that button? – Alberto Sinigaglia May 04 '21 at 21:41
Only the url changes – Thymeleaf May 04 '21 at 21:47
@Thymeleaf to what? is your website deployed somewhere so i can check it? – Alberto Sinigaglia May 04 '21 at 21:47
No its not but you can check the url here is an example of the url http://127.0.0.1:8000/create-questions?_token=ZOM6fNQSXxIUgYxNwOv8rYrD1dcgXncVTHEd9ejM&quizTest=57&question=Test+Question&answerA=ssdjn&answerB=nj&answerC=jnjn&answerD=jn&correct_answer=jn – Thymeleaf May 04 '21 at 21:49
The form is acting like get , thats wierd. – Thymeleaf May 04 '21 at 21:50
@Thymeleaf are you sure that your form is not inside another form? can you please try to ad a action to the form in the question and see if you are redirected to that url? – Alberto Sinigaglia May 04 '21 at 21:50
Yes i am sure , and if i add method="post" to the form i get the The POST method is not supported for this route. Supported methods: GET, HEAD. – Thymeleaf May 04 '21 at 21:53
please follow what i'm asking, I said to add ACTION, not method – Alberto Sinigaglia May 04 '21 at 21:54
I have tested it with adding a Action the form was sent succefully tto the controller but not with ajax . – Thymeleaf May 04 '21 at 21:57
The problem is with ajax i guess – Thymeleaf May 04 '21 at 21:58
and in the console there is no error at all? – Alberto Sinigaglia May 04 '21 at 21:58
than in that case you should first allow us to reproduce your error, until then, idk how to help you – Alberto Sinigaglia May 04 '21 at 21:59

Ajax is not submitting the form after button click

1 Answers1