How to submit the form to a servlet upon selecting an option from a list?

Question

I have a JSP with the following form. I don't want any buttons associated with the form to submit.

<form name="difficulty" action="${pageContext.request.contextPath}/game.do" method="post">
    <div id="difficulty">
        <label>Difficulty Level</label><br>
        <select name="difficultyLevel" onselect="submitOption()">
            <option value="easy" name="easy">Easy</option>
            <option value="medium" name="medium">Medium</option>
            <option value="hard" name="hard">Hard</option>
        </select>
    </div>
</form>

Here is my JS:

function submitOption() {
    document.getElementsByName('difficulty').submit();
}

After selecting the option the user should see the result from the servlet. How to solve this problem?

Answer 1

I tested this (briefly) and was having some problems with the onchange callback (nothing happened). This however works great (register event with Js, not HTML attribute):

<form name="difficulty" action="${pageContext.request.contextPath}/game.do" method="post">
    <div id="difficulty">
        <label>Difficulty Level</label><br>
        <select name="difficultyLevel">
            <option value="easy" name="easy">Easy</option>
            <option value="medium" name="medium">Medium</option>
            <option value="hard" name="hard">Hard</option>
        </select>
    </div>
</form>
<script type="text/javascript">
document.getElementsByName("difficultyLevel")[0].onchange = function() {
    document.getElementsByName('difficulty')[0].submit();
}
</script>

Answer 2

document.getElementsByName() returns an array. This should work:

function submitOption() {
    document.getElementsByName('difficulty')[0].submit();
}