Disabling a Form using Javascript under condition of "yes or no"

Question

I have this form with Yes or No question in a radio button style to indicate whether such form has been filled out and submitted before. I want to disable this form using Javascript if the answer is "yes", per user's answer.

The "yes" would indicate that the form has already been submitted before and therefore re-filling out of the form is not allowed. This is to attempt to stop double or multiple submission.

Any advise will be greatly appreciated.

Dawn26

Not sure that your going to achieve your stated goal this way... why would they come to the form if they've already submitted? Anyway, put a listener on the change event for the yes/no question and then toggle the `display` CSS. Give that a shot and if you have questions, post your code. — , Jun 03 '14 at 23:46
Form's don't have a disabled attribute, you can only disable individual controls. So you could do that, or hide the form (but how to uncheck the button if you hide it?). Either way, you should manage duplicate submission at the server. — RobG, Jun 04 '14 at 01:29

jbowman · Answer 1 · 2014-06-03T23:56:15.370

I might use an onchange function attached to the "Yes" radio button to either hide the form or remove it from the page altogether. Your markup might look similar to this:

<form id="formId">
    <input type="radio" value="Yes" onchange="YourClass.disableForm()"/>
    ...
</form>

And the javascript:

var YourClass = function() {
    return {
        disableForm : function() {
            document.getElementById("formId").setAttribute("style", "display: none;");
        }
    };
}();

score 0 · Answer 2 · answered Jun 04 '14 at 01:44

You can create a function that disables all form controls other than the checkbox based on whether it's selected or not. This doesn't stop duplicate submission, so you will still need to handle that at the server. You can also hide the controls if you like, but just disabling them is probably sufficient.

You may also want to put up a message to explain why the form controls are disabled.

function checkDisabled(target) {
  var form = target.form;
  var elements = form.elements;
  var disable = target.checked;

  // Check every control in the form
  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // Don't disable the checkbox
    if (elements[i] != target) {

      // Disable (or not) based on whether checkbox is checked
      elements[i].disabled = disable; 
    }
  }
}

Some test markup:

<label for="dateTime">Date and time<input id="dateTime" name="dateTime">
  <br>
  <span class="screenTip">YYYY-MM-DD hh:mm:ss</span>
</label>

<form>
  Have you submitted this form before? 
  <input type="checkbox" name="hasBeenSubmitted" value="1" onclick="checkDisabled(this)">
  <br>
  Foo: <input type="text" name="foo">
  <br>
  Bar: <input type="text" name="bar">
  <br>
  <input type="submit">
</form>

Disabling a Form using Javascript under condition of "yes or no"

2 Answers2