Django, JS/JQuery validate inputs and disable submit button

Question

I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.

Current code that I am trying from one of the posts linked and including my own template

<script type="text/javascript">
$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var inputsWithValues = 0;

  // get all input fields except for type='submit'
  var myInputs = $("input:not([type='submit'])");

  myInputs.each(function(e) {
    // if it has a value, increment the counter
    if ($(this).val()) {
      inputsWithValues += 1;
    }
  });

  if (inputsWithValues == myInputs.length) {
    $("input[type=submit]").prop("disabled", false);
  } else {
    $("input[type=submit]").prop("disabled", true);
  }
}


$('#submit').on('click', function() {
    var zip = $('#zip').val();
    var email = $('#email').val();
    var name = $('#name').val();

    //if inputs are valid, take inputs and do something
});

<form class="form-horizontal" action="" method="get" id="dataform">
    <div class="form-group">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-2 col-md-3">
                    <input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
                </div>
                <div class="col-md-3">
                    <input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
                </div>
                <div class="col-md-3">
                    <input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="btn btn-primary" id="submit" type="submit">Submit</div>
        </div>
    </div>
</form>

any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic

Answer 1

From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input , thus your selectors should be $("div[type=submit]") not $("input[type=submit]")

Better yet, just select by div id $('#submit')

Answer 2

Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.

if (inputsWithValues === 3) {
    $("div[type=submit]").attr("disabled", false);
  } else {
    $("div[type=submit]").attr("disabled", 'disabled');
  }