Dropdown HTML Forms with Nag

Is current?: 
Yes

 

The dropdown-nag template dropdown-nag.htm is a type of HTML form that is a variant of the dropdown. The nag functionality uses Javascript code to alert the user if they have not responded to all items.  This nag alerts the user once, and after that, the user is free to proceed to the next task, even without completing the items.  This template includes two buttons. The one at the very bottom, on line 90, is the real button, but it is hidden from view by wrapping it in a div tag and specifying the display style as none in order to prevent users from directly submitting the form.    

<div id="mybutton" style="display:none">
  <script language="JavaScript">writeButton("real hidden button");</script>
</div>

The button that users actually see appears on line 86:

<p class="textcenter">
  <button type="button" class="fakebutton" onclick="donag();"> Continue </button>
</p>

The fake button is centered and has the word Continue written on it.  The onclick event handler is set to the function donag().  When the user clicks on the Continue button, donag() is executed.  It checks whether the user had previously clicked this button.  If this is the first click and if some items are incomplete, the user is alerted.  If all items have been answered or if this is the second click, then the form is submitted using document.form1.submit().

<script type="text/javascript">

      var nnag=0;

      function donag() {

        nnag++; // increment by 1
        var allanswered=true; // assume everything is complete

        if (document.form1.dditem1.selectedIndex==0) allanswered=false;

        if (document.form1.dditem2.selectedIndex==0) allanswered=false;

        if (!allanswered && nnag<=1)
          alert("Please answer all items.\nThis reminder will appear once.");

          else document.form1.submit();// ok we are done, submitting the form

       }
</script>

When the page loads, the counter variable nnag is set to 0.  Each time donag() is called by a button click,  nnag increases by 1. donag() checks whether each of the two items have been answered, and if not,  allanswered is set as false.  The user is alerted if allanswered is false and if nnag <=1.  Otherwise, form1 is submitted and the user is taken to the next task.  If there were 9 items, but only items 3 and 7 have to be answered, the code can be changed as below. Observe that the nnag variable is no longer needed.

<script type="text/javascript">

      function donag() {

        var allanswered=true; // assume everything is complete

        if (document.form1.dditem3.selectedIndex==0) allanswered=false;

        if (document.form1.dditem7.selectedIndex==0) allanswered=false;

        if (!allanswered)
          alert("Please answer items 3 and 7.\nThey are compulsory.");

          else document.form1.submit();// ok we are done, submitting the form

       }
</script>