JavaScript enable/disable submit button

Question

I'm looking for using Javascript in order to enable/disable submit button. This button should respect both following conditions :

Enable : if checkbox is checked AND dropdown list value set
Disable : if both or one of previous conditions are not good (checkbox unchecked or date value not set)

This is my code :

function checkValid() {
  var cbChecked = $(".fake-radio").is(":checked");  // check if checked
  var selectelem = document.getElementById('year');
  var btnelem = document.getElementById('document-button');

  btnelem.disabled = !selectelem.value;

    }

And this is my html part :

<table id="document-table">
      <thead>
          <tr>
            <th>{% trans 'Choice' %}</th>
            <th>{% trans 'Document title' %}</th>
          </tr>
      </thead>
      <tbody>
          {% for document in query_document %}
            <tr>
              <td><input type="checkbox" class="fake-radio" id="document-checkbox" name="DocumentChoice"
                         value="{{ document.id }}"></td>
            </tr>
          {% endfor %}
      </tbody>
</table>

<select id="year" name="q1year" value="{{ request.get.q1year }}" required>
    <option selected="selected">
        <option value="" selected disabled hidden></option>
    </option>
</select>

<button class="btn btn-default" id="document-button" type="submit"
                name="UpdateDocument">{% trans "Submit" %}</button>

I'm pretty new with Javascript

EDIT :

I made this, is it true ?

function checkValid() {
      var cbChecked = $(".fake-radio").is(":checked");  // check if checked

      var selectelem = document.getElementById('year');
      var btnelem = document.getElementById('document-button');
      btnelem.disabled = !selectelem.value;
      var dropdown_value = btnelem.disabled

      $("#document-button").prop("disabled", !cbChecked || dropdown_value);
    }

Dacre Denny · Accepted Answer · 2018-10-15 09:26:27Z

0

If I understand your situation correctly, then it looks like you have a minor logic error in your latest update. Consider revising your checkValid function like so:

function checkValid() {

  var selectelem = $('#year');
  var isChecked = $(".fake-radio").is(":checked");  // radio is checked

  var selectHasValue = !!selectelem.val(); // select has value

  // use de morgans law to compute disabled property
  $("#document-button").prop("disabled", !(isChecked || selectHasValue));
}

You need to ensure that checkValid() is called when ever relevant form inputs are changed. You can do this by adding the following script:

$(function() {

    // Apply validation logic when relevant fields change
    $('#year, .fake-radio').change(checkValid);

    checkValid(); // Apply validation logic on page load automatically
});

Also, for more on de morgans law, see this wiki article. Hope this helps!

edited Oct 15, 2018 at 9:26

answered Oct 15, 2018 at 9:20

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Essex Over a year ago

I tried your code. I can select a date value without check my checkbox and submit button appears enable. It shouldn't be. I have to see why it appears this effect with your code.

Dacre Denny Over a year ago

Hi, just expanded the answer - does this help?

Omid Navy · Accepted Answer · 2018-10-15 09:48:08Z

you have to add on change event for your checkbox and select. and you don't need jquery for doing this, use pure js whenever you can. this is what you need, take this as a reference and edit your code :

function checkValid(){
    var check = document.getElementById("document-checkbox").checked;
    var e = document.getElementById("year");
    var select = e.options[e.selectedIndex].value;
  
    if (select && check) document.getElementById("document-button").disabled = false 
    else document.getElementById("document-button").disabled = true
    
    
  }

<body>
    <input onchange="checkValid()" type="checkbox" class="fake-radio" id="document-checkbox" name="DocumentChoice" value="{{ document.id }}">
    <select onchange="checkValid()" id="year" name="q1year" value="{{ request.get.q1year }}" required>
        <option selected="selected">
            <option value="x">x</option>
        </option>
    </select>
    <button disabled class="btn btn-default" id="document-button" type="submit" name="UpdateDocument">submit</button>
</body>

Collectives™ on Stack Overflow

JavaScript enable/disable submit button

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related