Not being able to send the html form data to lambda function

body> <div class="testbox"> <form method="post"> <div class="banner"> <h1>TechCider Application Form</h1> </div> <div class="item"> <br> <p>Name<span class="required"></span></p> <div class="name-item"> <input type="text" name="firstName" placeholder="First" required id="firstName"/> </div> <div class="name-item"> <input type="text" name="lastName" placeholder="Last" required id="lastName"/> </div> </div> <div class="contact-item"> <div class="item"> <p>Email<span class="required"></span></p> <input type="text" name="email" required id="email"/> </div> </div> <div class="contact-item"> <div class="item"> <p>Phone<span class="required"></span></p> <input type="text" name="phone" required id="phone"/> </div> </div> <div class="position-item"> <div class="item"> <p>What position are you applying for?<span class="required"></span></p> <select name="position" required id="position"> <option value="President">President</option> <option value="Vice President">Vice President</option> <option value="Treasurer">Treasurer</option> <option value="Head">Head</option> <option value="Sub Head">Sub Head</option> </select> </div> </div> <div class="question"> <br> <p>Which department are you interested in?</p> <div class="question-answer" id="department"> <div> <input type="radio" value="Research and Development" id="radio_1" name="department" required/> <label for="radio_1" class="radio"><span>Research and Development</span></label> </div> <div> <input type="radio" value="Public Relation" id="radio_2" name="department" required/> <label for="radio_2" class="radio"><span>Public Relation</span></label> </div> <div> <input type="radio" value="Marketing" id="radio_3" name="department" required/> <label for="radio_3" class="radio"><span>Marketing</span></label> </div> <div> <input type="radio" value="Digital Creatives" id="radio_4" name="department" required/> <label for="radio_4" class="radio"><span>Digital Creatives</span></label> </div> </div> </div> <div class="item"> <p>Upload your CV<span class="required">*</span></p> <input type="file" name="cv" required id="cv"/> </div> <div class="btn-block"> <button type="button" onclick="callAPI(document.getElementById('firstName').value,document.getElementById('lastName').value,document.getElementById('email').value,document.getElementById('phone').value,document.getElementById('position').value,document.getElementById('department').value,document.getElementById('cv').value)">SUBMIT</button> </div> <div id="message-container"></div> </form> </div> <script> function callAPI(fName, lName, eml, ph, pos, dept, c_v) { // Convert the data from the HTML form to a JSON object var data = { "firstName": fName, "lastName": lName, "email": eml, "phone": ph, "position": pos, "department": dept, "cv": c_v };

// Send the JSON object to the Lambda function var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var raw = JSON.stringify(data); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("https://6j61j5oxjh.execute-api.ap-south-1.amazonaws.com/dev", requestOptions) .then(response => response.text()) .then(result => alert(JSON.parse(result).message)) .catch(error => console.log('error', error)); } </script>

</body>

This is the code for my html form, I don't understand what's wrong in it because when I submit the form, I get a message of 'undefined'. My lambda function is mostly correct since I am getting the data in dynamoDB through it when I test the function.