How do i access input data of a form from Laravel server

Question

enter image description herebelow is the form

                  <form method="post" style="display: none;" encType="multipart/form-data" class="landLords1" name="addACourse" action="{{URL::to('/addACourse')}}">
                       {{ csrf_field() }}
                       <input type="text" placeholder="Course Title" name="title"><br>
                       <select name="duration" id="duration">
                           <option value="1 weeks">1 week</option>
                           <option value="2 weeks">2 weeks</option>
                           <option value="3 weeks">3 weeks</option>
                           <option value="4 weeks">4 weeks</option>
                           <option value="5 weeks">5 weeks</option>
                           <option value="6 weeks">6 weeks</option>
                           <option value="7 weeks">7 weeks</option>
                           <option value="3 months">3 months</option>
                           <option value="4 months">6 months</option>
                           <option value="5 months">5 months</option>
                           <option value="6 months">6 months</option>
                           <option value="7 months">7 months</option>
                           <option value="8 months">8 months</option>
                           <option value="9 months">9 months</option>
                           <option value="10 months">10 months</option>
                           <option value="11 month">11 months</option>
                           <option value="1 year">1 year</option>
                       </select><br>
                       <input type="text" placeholder="price" name="price"><br>
                       <input type="text" placeholder="Course Code e.g(ECN 504)" name="coursecode"><br>
                       <input type="text" name="author" placeholder="Authors names"><br>
                       <input type="file" name="picture" placeholder="select picture"><br>
                       <textarea name="desscription" id="textArea" cols="30" rows="10" placeholder="write a detail descripton of the content of the course you are creating, write a summary of the course. this content will be displayed went users click on the course"></textarea><br>
                       <button>submit</button><br>
                    </form> 

Below is the javascript code

           function addACourse(param){
                 //event.preventDefault();
                 console.log(param);
                 const theToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                 //const theForm = document.getElementsByClassName('landLords1')[0];
                 var formData = new FormData(param);
                     formData.append('vin', 'value');
                 var xhttp = new XMLHttpRequest();
                       xhttp.open('POST', '/addACourse', true);
                       xhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                console.log(this.responseText);
                                return;
                                const data = JSON.parse(this.responseText);
                                      console.log(data);
                                      // use data here!
                            }
                       }

                       xhttp.setRequestHeader('X-CSRF-TOKEN', theToken);
                       xhttp.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                       xhttp.setRequestHeader("processData", 'false');
                       xhttp.setRequestHeader('cache', 'false');
                       //xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                       xhttp.send(JSON.stringify(formData));

         }

         const theForm = document.getElementsByClassName('landLords1')[0];
         theForm.addEventListener('submit', function(event){
                event.preventDefault();
                addACourse(this);
                return;
         }, false);

This is my laravel controller

<?php
namespace App\Http\Controllers;
use DB;
use Storage;
use Illuminate\Http\Request;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Http\UploadedFile;

class AddACourseController extends BaseController
{
public function addACourse(Request $request){

    $value = $request->input('coursetitle');
    return response()->json(array('data' => $value), 200);
}
}

My intension is not to use Jquery to submit the form. I want to submit the form using xmlHttpRequest(). I keep getting null on the server each time I try to submit the form, have tried using both

$theData = $request->input('coursetitile');
$data = $request->coursetitle;
return response()->json(array('data' => $data, 'theData'  => $theData),200);
//note coursetitle is one of the imput field.

I keep getting null, please how do i resolve this. please I do not want any answer that uses JQuery to resolve this. I want answer in vanila javascript alone.

Answer 1

After wasting a lot of time trying hard to get this done on time, I found out eventually that in setting the attributes of the requestHeader, 'contentType' should be used and not 'content-Type', ie. I changed

xhttp.setRequestHeader('content-Type', 'multipart/form-data');

to

xhttp.setRequestHeader('contentType', 'multipart/form-data');

this entirely solved the issue, the payload was loaded properly with the formData object and laravel was able to access the input fields. Thanks a lot guys for making attempts to help me out, stackoverflow is a great community.

Answer 2

Jason, if your answer were the solution, why would this line:

formData.append('vin', 'value');

Located within his AddAClass() function not appear within the Request body sent to the server?

Answer 3

As far as I can tell from your screenshots and code, you're not actually submitting any data to the server.

Your first screenshot talks about the Request Payload right at the very bottom. It's slightly cut off, but it looks like you are submitting an empty form. This means that your javascript is not finding any form data to send.

Going backwards through this, you are calling addACourse from your eventlistener with an anonymous function (a closure).

theForm.addEventListener('submit', function(event){
    event.preventDefault();
    addACourse(this);
    return;
}, false);

When you are referring to this in a closure, you are referring to the closure itself, and not the caller. Naturally, the closure has no form, therefore you have no form data.

Instead (this is untested), try to pass a reference to the form to your addACourse function. You may need to tweak it a little to get the form data.

theForm.addEventListener('submit', function(event){
    event.preventDefault();
    addACourse(theForm);
    return;
}, false);