Question

<button type="submit" id="start-break" name="start" type="button" class="actv-btn-dft1 blbg" onClick="showhide('start-break', 'stop-break');return false;"  title="Start Break">Start Break</button> 
<button type="submit" id="stop-break" type="button" class="actv-btn-dft1 orbg" onClick="showhide('stop-break', 'start-break');return false;"  style="display:none"  title="Stop Break">Stop Break</button>

I am using something like a toggle button where click of start makes visible stop then on click of stop start button is visible.

I am using showhide('start-break', 'stop-break') JavaScript function as described below:

function showhide(hideid,showid)
{
 document.getElementById(showid).style.display='block';
 document.getElementById(hideid).style.display='none';
}

I want to know why I am not able to get the value of the start or stop in the controller.

-> If I remove that return false in the onclick I get it submitted but the UI gets disturbed (the button does not remain in the stop position when start is clicked).

Answer 1

The return false; is blocking the submit. When the form is submitted, the page will of course be refreshed with the response of the form submit request.

Just don’t use JS to show/hide the buttons. Use the server side language for this (based on your profile and the edit history you’re using “J2EE” and thus you’re familiar with JSP):

<c:if test="${empty param.start}">
   <button type="submit" name="start">Start</button>
</c:if>
<c:if test="${not empty param.start}">
   <button type="submit" name="stop">Stop</button>
</c:if>

An alternative is to use Ajax to submit the form. But that’s a completely different story.