Question

<c:if test="${not empty timeout}">
  <c:choose>
    <c:when test="${startclicked=='lunch'}">
      <div class="f-left lf_rt5">
        <c:if test="${startclicked !='break'}">
          <button type="submit" id="start-break" name="start" value="start-break" disabled="disabled"
                  type="button" class="actv-btn-dft1 blbg" onclick="return startbreak();" title="Start Break">
            Start Break
          </button>
        </c:if>
        <c:if test="${empty stopclicked && startclicked =='break'}">
          <button type="submit" id="stop-break" name="stop" value="stop-break" disabled="disabled"
                  type="button" class="actv-btn-dft1 orbg" onclick="return stopbreak();" title="Stop Break">
            Stop Break
          </button>
        </c:if>
      </div>
    </c:when>
    <c:otherwise>
      <div class="f-left lf_rt5">
        <c:if test="${startclicked !='break'}">
          <button type="submit" id="start-break" name="start" value="start-break" disabled="disabled"
                  type="button" class="actv-btn-dft1 blbg" onclick="return startbreak();" title="Start Break">
            Start Break
          </button>
        </c:if>
        <c:if test="${empty stopclicked && startclicked =='break'}">
          <button type="submit" id="stop-break" name="stop" value="stop-break" disabled="disabled"
                  type="button" class="actv-btn-dft1 orbg" onclick="return stopbreak();" title="Stop Break">
            Stop Break
          </button>
        </c:if>
      </div>
    </c:otherwise>
  </c:choose>


  <c:choose>
    <c:when test="${startclicked=='break'}">
      <div class="f-left">
        <c:if test="${startclicked !='lunch'}">
          <button type="submit" id="start-lunch" name="start" value="start-lunch" disabled="disabled"
                  type="button" class="actv-btn-dft1 blbg" onclick="return startlunch();" title="Start Lunch">
            Start Lunch
          </button>
        </c:if>
        <c:if test="${empty stopclicked && startclicked =='lunch'}">
          <button type="submit" id="stop-lunch" name="stop" value="stop-lunch" type="button"
                  disabled="disabled" class="actv-btn-dft1 orbg" onclick="return stoplunch();"
                  title="Stop Lunch">Stop Lunch
          </button>
        </c:if>
      </div>
    </c:when>
    <c:otherwise>
      <div class="f-left">
        <c:if test="${startclicked !='lunch'}">
          <button type="submit" id="start-lunch" name="start" value="start-lunch" disabled="disabled"
                  type="button" class="actv-btn-dft1 blbg" onclick="return startlunch();" title="Start Lunch">
            Start Lunch
          </button>
        </c:if>
        <c:if test="${empty stopclicked && startclicked =='lunch'}">
          <button type="submit" id="stop-lunch" name="stop" value="stop-lunch" type="button"
                  disabled="disabled" class="actv-btn-dft1 orbg" onclick="return stoplunch();"
                  title="Stop Lunch">Stop Lunch
          </button>
        </c:if>
      </div>
    </c:otherwise>
  </c:choose>
</c:if>

I have an attendance system which 4 buttons StartBreak,STOPBreak and StartLunch,STOPLunch button ..(In UI the buttons are paired ie: toggle buttons are used – same button for startbreak and stop break ;and another one for start and stop lunch)

The problem is that Once the Start button say break is clicked and then the page refreshed the form gets submitted again .. I dont expect this to happen .. I want the form to not submit the start till I press Stop …
Similarly If i press Stop button – and then refresh the page the Stop button gets submitted again …

I hope I was clear pls pour in ur suggestions …!

Answer 1

As per my understanding, Your problem is the page is loading twice once you click the button. Change the button type as "button" instead of submit. If you click submit button the form will be submited automaticaly.