Issues with Yes/No Radio Buttons (Need to block submission if "yes" is selected)

Question

I'm having some issues trying to find the best course of action to block a form submission from going through if the answer to a yes/no question or at least give an error message properly.

First attempt was simply adding required="true" to the "No" button:

<th valign="top" align="left">
    <label for="yesOrNo">
        <strong>Are you a bad guy?</strong>
        <br />
        <br />
    </label>
</th>
<td valign="top">
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" value="yes" />Yes</label>
    <br />
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" required="true" value="no" />No</label>
    <br />
    <br />
</td>
</tr>

Then after that didn't work fully with "yes" still being valid for submission I tried making a hidden field that's required through angular which worked for me in the past. Granted this worked for a text field and numbers, I took an estimate on what to use in the case of a yes-no radio button:

<th valign="top" align="left">
    <div ng-if="angularYesOrNo=true">You are uneligible for this promotion</div>
    <label for="yesOrNo"><strong>Are you a bad guy?</strong>
        <br />
        <br />
    </label>
</th>
<td valign="top">
    <label>
        <input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo" value="yes" />Yes</label>
    <br />
    <label>
        <input type="radio" name="yesOrNo" id="yesOrNo" value="no" />No</label>
    <input type="hidden" name="badGuyFlag" id="badGuyFlag" ng-required='angularYesOrNo=true' />
    <br />
    <br />
</td>
</tr>

Is there anything in either code that I would need to change to make this work? Or is there any functions I would need to add in a separate script tag? This has been racking my brain all afternoon.

I don't do angular, but something like this would work in vanilla js: `form1.addEventListener("submit", function () { var radios = document.querySelectorAll("input[type='radio']"); for (var i = 0; i < radios.length; i++) { if (radios[i].value === "yes" && radios[i].checked) { return false; } } form1.submit(); });` — Howard Renollet, Nov 13 '15 at 21:36

score 0 · Accepted Answer · answered Nov 13 '15 at 21:59

Working Plunker

It looks like you need to define your variable in your Angular Javascript file like this:

Javascript

$scope.angularYesOrNo = {bad:undefined};

Your ng-if statement needs two equal signs to evalute your angularYesOrNo variable.

Html

<div valign="top" align="left">
  <div ng-if="angularYesOrNo.bad=='Yes' ">You are uneligible for this promotion</div>
  <label for="yesOrNo"><strong>Are you a bad guy?</strong>
    <br />
    <br />
  </label>
</div>
<div valign="top">
  <label>
      <input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo"  value="Yes" />
      Yes
  </label>
  <br />
  <label>
    <input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo"  value="No" />
    No
  </label>

  <br />
  <br />
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:03

You can use ng-submit on the form to set a submit handler which validates the form data before it is submitted.

<form name="myForm" novalidate ng-submit="processSubmit()">
    <label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo"  value="yes" /> Yes</label><br />
    <label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo"  value="no" /> No</label><br />

In your controller define the function.

$scope.angularYesOrNo = '';
$scope.processSubmit = function() {
    if ($scope.angularYesOrNo == '' || $scope.angularYesOrNo == 'Yes') {
        // the form should not be submitted
    } else {
        // process the form (submit or ajax)
    }
};

And if you want to trigger the form submit from the controller see https://stackoverflow.com/a/25102791/5509627

Issues with Yes/No Radio Buttons (Need to block submission if "yes" is selected)

2 Answers2