Radio Button HTML Forms with Nag

Is current?: 
Yes

The radiobutton-nag template radiobutton-nag.htm is a type of HTML form that is a variation of the radiobutton.  The nag functionality uses Javascript code to alert the user if he or she has 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.

The use of the fake button and the distinction between the fake button and real button is explained in the dropdown-nag entry. The onclick event handler in the fake button on line 78 is the function donag().  When the user clicks on the Continue button, donag() checks whether the user had previously clicked this button.  If this is the first click and the responses are incomplete, then the user is alerted.  If this is the second click, or if the items have been completed, then the form is submitted using document.form1.submit().  The donag()for radiobutton is below:

<script type="text/javascript">

  var nnag=0;

  function donag() {

    nnag++;               // increment by 1

    var allanswered=true; // assume everything is complete

    if (document.form1.rbitem1[0].checked) allanswered=false;// missing-value in rbitem1?

    if (document.form1.rbitem2[0].checked) allanswered=false; // missing-value in rbitem2?

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

          else document.form1.submit();

   }

 </script>

If there were 9 items, but only items 3 and 7 have to be answered, the code can be changed as below. The nnag variable is no longer needed.

<script type="text/javascript">

  function donag() {

    var allanswered=true; // assume everything is complete

   if (document.form1.rbitem3[0].checked) allanswered=false;// missing-value in rbitem3?

   if (document.form1.rbitem7[0].checked) allanswered=false;// missing-value in rbitem7?

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

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

    }
</script>

Of course, for the above code to work, these variables would need to be initialized to the missing value as below in the hidden div at the top of the form.

<div style="display:none">

  <input type="radio" name="rbitem1" value="." checked />

  <input type="radio" name="rbitem2" value="." checked />

  <input type="radio" name="rbitem3" value="." checked />

  <input type="radio" name="rbitem4" value="." checked />

  <input type="radio" name="rbitem5" value="." checked />

  <input type="radio" name="rbitem6" value="." checked />

  <input type="radio" name="rbitem7" value="." checked />

  <input type="radio" name="rbitem8" value="." checked />

  <input type="radio" name="rbitem9" value="." checked />

</div>