Why does difference in name attribute of an HTML element affect variable value in a Servlet?

I'm trying to learn Servlets and I came across an issue. When I use dashes or underscores in name attribute of an HTML element the value that servlet receives is null. However, If I don't use underscores or dashes, the servlet receives the entered value.

<input type="text" name="labourUnionFee" id="labour-union-fee" value="0">
String labourUnionFee = request.getParameter("labourUnionFee");

works fine and the result can be seen from here output of the first snippet, whereas

<input type="text" name="labour-union-fee" id="labour-union-fee" value="0">
String labourUnionFee = request.getParameter("labour-union-fee");

does not return any value when 'submit' button is pressed as this picture demonstrates output of the second snippet

Why does this occur?

EDIT

I probably should have mentioned that I am also using an AJAX function:

function getNetSalary() {
        $("#submitButton").click(function(){
                $.ajax({
                        url:'someservlet',
                        data: {
                            labourUnionFee: $('#labour-union-fee').val()
                        },
                        type: 'POST',
                        cache: false,
                        success: function(data){
                            $('#net-salary-information-div').text(data);
                        },
                        error: function(){
                            alert('Please Fill all necessary fields');
                        }
                    }
                );
            }
        );

And this is inside my 'someservlet':

String labourUnionFee = request.getParameter("labour-union-fee");
    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(labourUnionFee);