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.
