I have a simple form that is supposed to be saved in applicant_need table in the database. my fields are (coursetype, course_need, c_name, total). but whenever I try to submit it doesnt work I get a server error 500 then it tells me “Cannot read properties of undefined (reading ‘text’)”
here’s my html

           <form id='addneed' class="intro-y box grid-cols-1 p-5">
         
                <div class="grid grid-cols-1 gap-4 row-gap-5 mt-5">
                                           
                    <div class="intro-y col-span-12 sm:col-span-4 px-2">

                        <div class="mb-2">Course Type</div>
                        <select name="coursetype" onchange="course_type_handler()" id="course_type_id" class="input w-full border flex-1 " required="">
                            <option">Choose an option</option>
                            <?php $x = 1;
                            if ($course_types->num_rows > 0) {
                                while ($rowm = $course_types->fetch_assoc()) { ?>
                                    <option value="<?php echo $rowm['id']; ?>"><?php echo $rowm['name']; ?></option>
                            <?php }
                            } ?>
                        </select>
                    </div>
            
            <div class="intro-y col-span-12 sm:col-span-4 px-2">
                        <div class="mb-2">Courses Need</div>
                        <select name='course_need' id="select_courses_id"  class="input w-full border flex-1 " required="">
                            <option >Choose an option</option>
            
                
                        </select>
                    </div>

    <div class="intro-y col-span-12 sm:col-span-4 px-2">

                        <label>Other</label>
<br>
<div>
                        <input type="radio" name='others'   onchange="radio_extra_handler()" class="input w-full border flex-1" >

                    </div>     

                    </div>  
<br>
<div class='intro-y col-span-12 sm:col-span-4 px-2' name='extra'  id="extra" style='display: none;'>
                        
                        <div class="mb-2">Course Name</div>
                        <input name='c_name'   type="text" class="input w-full border flex-1"  placeholder="Enter course name">
                   
                   
                        <div class="mb-2">Total</div>
                        <input name='total'  type="number"  class="input w-full border flex-1" placeholder="Enter number of nominees">
                    

 </div>                               

    
                    

                </div>

                <div style="display: flex; justify-content: center; margin-top: 20px;">
                    <button required type="submit" class=" button text-white bg-theme-1 shadow-md mr-2">Submit</button>
                </div>



            </div>


      
</form>

js script

<script>
function handleErrors(response) {
    if (response?.ok) {
  console.log('Use the response here!');
} else {
  console.log(`HTTP Response Code: ${response?.status}`)
}}
   // Function to handle form submission
        function handleSubmit(event) {
            // Prevent the default form submission behavior
            event.preventDefault();

            // Get form elements and their values
            const form = event.target;
            const formData = new FormData(form);
            
            // Convert FormData to an object
            const formObject = {};
            formData.forEach((value, key) => {
                formObject[key] = value;
            });

             // Send form data to a PHP file using the Fetch API
            fetch('server/add_needs_server.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formObject),
            })
         .then(handleErrors)
            .then(response =>  response.text())  // I believe the issue start here
            .then(data => {

        console.log(document.getElementById('course_type_id').value);
        console.log(document.getElementById('select_courses_id').value);

                if(data == "Inserted"){

            var coursename = document.querySelector('select[name=course_need]').value;
                    var message = document.querySelector('.message');
                    var response = document.querySelector('.response');

                    message.innerHTML = alert( 'your request has been submitted' );

                    message.classList.remove('failed');
                    message.classList.add('success');
                    response.classList.remove("hide");

                    document.getElementById("addneed").reset();


                } else {
                    var coursename = document.querySelector('select[name=course_need]').value;
                    var message = document.querySelector('.message');
                    var response = document.querySelector('.response');

                    message.innerHTML =  alert( 'Failed to upload' + coursename  );

                    message.classList.remove('success');
                    message.classList.add('failed');
                    response.classList.remove("hide");



                   
                                   }
                //console.log('Server response:', data);
                // You can handle the text response as needed, e.g., display it on the page
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // Get the form element and add a submit event listener
        const myForm = document.getElementById('addneed');
        myForm.addEventListener('submit', handleSubmit);
    </script>