Form to JSON with javascript and Ajax POST [LARAVEL]

Question

I have to pass form data with POST (converting it into JSON format), exploiting Javascript and Ajax in Laravel.

Basically, the data in the form have to became a json in order to pass it (with POST), to Controller class with a method able to uses the data. I have a bootstrap form:

 <form id="contactForm" action="#" method="post">
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

<div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

Now, to pass the data converting it in JSON I used:

 <script>
 var $contactForm = $('#contactForm');
 $contactForm.submit(function(e) {
 e.preventDefault();
 $.ajax({
    url: './getContact',
    method: 'POST',
    data: $(this).serialize(),
    dataType: 'json',
success:success: function(data)
{

}
});
});
</script>

Exploiting Laravel routes.php

Route::post('./getContact', 'Controller@tryIt');

It is a correct way to use this service? (This due to the fact that I can't use the data form, like the POST doesn't provide any success).

Could you help me?

Thanks in advance

Achraf Khouadja · Accepted Answer · 2016-12-17 23:51:36Z

1

First you need to add the csrf token Also try this way.

HTML

<form id="contactForm" action="#" method="post">
{!! csrf_field() !!}
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

<div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

JS

     <script>
   $(document).ready(function() {
       $(document).on('contactForm', '#reg-form', function(e) {
        var data = $("#reg-form").serialize();
        e.preventDefault();
           $.ajax({
               type: 'POST',
               url: '{{url("/getContact")}}',
               data: data,
               success: function(data) {
                alert("success");
                console.log(data);

               },
               error: function(data) {
                   alert("error");
               }
           });
           return false;
       });
   });
   </script>

Route

Route::post('/getContact', 'Controller@tryIt');

In the tryit method u should return json response

public function tryit(Request $request){

//logic here

return response()->json("success");

}

answered Dec 17, 2016 at 23:51

Achraf Khouadja

6,2994 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user7311536 Over a year ago

Thank for your answer: Now I have the Error: MethodNotAllowedHttpException in RouteCollection.php line 218

Achraf Khouadja Over a year ago

something wrong in your routes file, or the url property in the call,play around with those u will find it! i can't really guess what is the issue unless you update your question with the newest code u have

user7311536 Over a year ago

Dear Achraf, thanks for your support. Now it works well. But, actually due to your code, the response is : "success", how can I print the inserted JSON data using tryIt function within Controller?

Achraf Khouadja Over a year ago

in success : function(data) use the data variable whuch will contain the data returned from the tryit function

user7311536 Over a year ago

Thank for your answer. But, How can I do it?

|

Collectives™ on Stack Overflow

Form to JSON with javascript and Ajax POST [LARAVEL]

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related