I have a scenario where I need to select one button out of multiple options (similar to radio buttons). However, when I try to retrieve the selected button's value in my servlet, it returns null. Below is the code I am using.
JS PAGE
$.each($('.radio-btn'), function(key, value) {
$(this).click(function(e) {
$('.radio-btn-selected').removeClass('radio-btn-selected').addClass('radio-btn');
$(this).removeClass('radio-btn').addClass('radio-btn-selected');
// do whatever you want on click
});
});
CSS PAGE
.radio-btn {
background-color: #FFFFFF;
border: 1px solid #4A4A4A;
color: #4A5362;
font-size: 14px;
line-height: 26px;
outline: none;
padding: 7px;
cursor: pointer;
}
.radio-btn-selected {
background-color: #FFFFFF;
border: 1px solid #55BC7E;
color: #55BC7E;
font-size: 14px;
line-height: 26px;
outline: none;
padding: 7px;
cursor: no-drop;
}
JSP PAGE
<form action="<%=request.getContextPath() %>/BookAppointment" method="POST">
<div class="timmings">
<div id="ajaxResponse" style="display:none">
<div class="radio-btn-row">
<div class="radio-btn-wrapper">
<button id="bt1" class="radio-btn" name="slot" type="button" value="10:00 AM">10:00 AM</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn2" class="radio-btn" name="slot" type="button" value="10:30 AM">10:30 AM</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn3" class="radio-btn" name="slot" type="button" value="3:00 PM">03:00 PM</button>
</div>
<div class="radio-btn-wrapper">
<button id="btn4" class="radio-btn" name="slot" type="button" value="3:30 PM">03:30 PM</button>
</div>
</div>
</div>
<div class="book" style="display:none"><input type="submit" class="submit" value="Book Appointment"></div>
</div>
</form>
Servlet Page
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/BookAppointment")
public class BookAppointment extends HttpServlet {
private static final long serialVersionUID = 1L;
public BookAppointment() {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String date=request.getParameter("date");
String slot=request.getParameter("slot");
System.out.println(date+" "+slot1);
}
}
Any suggestions would be appreciated.