Here is form in JSP
<div class="col-lg-7">
<form action="FormServlet" method="post" id="contact-form" data-aos="fade-up" data-aos-delay="200">
<div class="row gy-4">
<div class="col-md-6">
<label for="name-field" class="pb-2">Your Name</label>
<input type="text" name="firstname" id="name-field" class="form-control">
</div>
<div class="col-md-6">
<label for="email-field" class="pb-2">Your Email</label>
<input type="email" class="form-control" name="email" id="email-field">
</div>
<div class="col-md-12">
<label for="subject-field" class="pb-2">Subject</label>
<input type="text" class="form-control" name="subject" id="subject-field">
</div>
<div class="col-md-12">
<label for="message-field" class="pb-2">Message</label>
<textarea class="form-control" name="message" rows="10" id="message-field"></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<button type="submit">Send Message</button>
</div>
</div>
</form>
</div><!-- End Contact Form -->
here is Javascript file code included in JSP file
document.getElementById('contact-form').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the default form submission
const form = this; // Get the form
const formData = new FormData(form); // Create FormData object from the form
// You can also append other fields if necessary, e.g.:
// formData.append('customField', 'value');
// Get the action URL of the form (this should be the servlet URL)
const action = form.action;
//const action = 'http://localhost:9090/portfolio/FormServlet'
// Show loading message or spinner if necessary
//document.getElementById('responseMessage').textContent = 'Submitting...';
// Send the form data to the servlet using Fetch API
fetch(action, {
method: 'POST', // HTTP method for form submission
body: formData, // The FormData object
})
.then(response => response.ok) // Assuming the servlet returns JSON
.then(data => {
// Handle successful response from the servlet
//document.getElementById('responseMessage').textContent = 'Form submitted successfully!';
console.log(data); // Process response if necessary
form.querySelector('.sent-message').classList.add('d-block');
})
.catch(error => {
// Handle any error that occurs during the fetch
//document.getElementById('responseMessage').textContent = 'Error submitting form!';
console.error('Error:', error);
});
});
and here is servlet
package com.pz.controller;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
/**
* Servlet implementation class FormServlet
*/
public class FormServlet extends HttpServlet {
private static final long serialVersionUID = 1 L;
/**
* @see HttpServlet#HttpServlet()
*/
public FormServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("firstname");
System.out.println(name);
if (name == null || name.isEmpty()) {
response.getWriter().println("Name field is required.");
return;
}
PrintWriter out = response.getWriter();
out.println("OK");
}
}
When I remove javascript file from jsp, form date get submitted to servlet and request.getParameter("firstname");
works fine and prints name on console. but when I include javascript request.getParameter("firstname");
prints null on console.