Button value not sent in formdata to servlet

Question

I am using multiple buttons and only one of them can be selected (like a group of radio buttons). I am trying to get the value of the button which is selected in my servlet, but it is returning null. I have attached my code below.

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

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.

user_519413 · Answer

You seem to be expecting the value of the 'selected' button to be sent in the form submission - this is not how buttons work. To fix this you will need to amend either your JS or HTML.

The first approach would be to include a hidden field which you update when a button is selected. Note in your jQuery that you don't need the $.each() loop; click() will be applied to all elements in the jQuery object.

$('.radio-btn').click(function(e) {
  $('.radio-btn-selected').removeClass('radio-btn-selected').addClass('radio-btn');
  $(this).removeClass('radio-btn').addClass('radio-btn-selected');

  $('#slot').val(this.value);
});

.radio-btn-row {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.radio-btn-wrapper {
  margin: 0px 4px;
}

.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;
}

.radio-btn-disabled {
  cursor: no-drop;
}

.submit {
  margin-top: 10px;
  padding: 5px;
  background-color: #33b5e5;
  border: 2px solid black;
  cursor: pointer;
}

The alternative approach would be to amend your HTML so that instead of using button elements, which don't send a value in the request, change them to actual radio inputs which do. In addition it means you don't need the JS to add/remove classes as the styling can all be done through CSS.

Button value not sent in formdata to servlet

1 Answers