JavaScript: disable Submit button if input is empty (without JQuery etc)

Question

Good day everyone.

I tried to find the answer, but most of options which I found use JQuery. Unfortunately I can't use it in this specific task, only HTML + pure JS.

I have 2 date-inputs and the "Submit" button below, which must be disabled if one of inputs (or both) is empty.

<form action={"someaction"} method="post">
        <Row>
          <Col xs={4}><b>Start date of the period</b></Col>
          <Col xs={6}>
            <form name="dateFrom">
            <input  className="form-control" id="dateFrom" name="reportFrom" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={4}><b>End date of the period</b></Col>
          <Col xs={6}>
            <form name="dateTo">
            <input  className="form-control" id = "dateTo" name="reportTo" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={1}/>
          <Col xs={5}><input className="btn btn-primary" type="submit" value="Submit data"/></Col>
                   //THIS SUBMIT BUTTON MUST BE DISABLED IF "dateFrom" OR 
                   //"dateTo" IS EMPTY
        </Row>
      </form>

How can this be achieved?

Thank you in advance for your cooperation

Answer 1

First assign the id for your submit button and add the below line on the validation js,

document.getElementById('submitBtn').disabled = true;

Answer 2

function checkInputs(e) {
    var btnDF = document.querySelector('#dateFrom');
    var btnDT = document.querySelector('#dateTo');
    var btnSbm = document.querySelector('input[type="submit"]');
    var blnRtn = 0;
    if(btnDF && btnDT) { blnRtn = btnDF.value!='' && btnDT.value!='' ? 1 : 0; }
    btnSbm.disabled = blnRtn ? false : true;
    if(e.type=='submit') { return blnRtn; }
}

This will have to be attached to the form's onsubmit to prevent submissions via hitting enter. You will also have to attach this function to onkeypress (I'll have to check if this is the correct event type (update: it seems to be), as key events have always confused the hell out of me) or have a timer set to run the function every now and then.

<form action={"someaction"} method="post" onsubmit="javascript: return checkInputs(event);">
    <Row>
      <Col xs={4}><b>Start date of the period</b></Col>
      <Col xs={6}>
        <form name="dateFrom">
        <input className="form-control" id="dateFrom" name="reportFrom" type="date" onkeypress="javascript: checkInputs(event);" />
        </form>
      </Col>
    </Row>
    <br />
    <Row>
      <Col xs={4}><b>End date of the period</b></Col>
      <Col xs={6}>
        <form name="dateTo">
        <input className="form-control" id = "dateTo" name="reportTo" type="date" onkeypress="javascript: checkInputs(event);" />
        </form>
      </Col>
    </Row>
    <br />
    <Row>
      <Col xs={1}/>
      <Col xs={5}><input className="btn btn-primary" type="submit" value="Submit data" /></Col>
    </Row>
</form>

Answer 3

Try this... :)

window.onload = function(){
  var inputs = document.querySelectorAll("[js-validate]");
  for (var i = 0, len = inputs.length; i < len; i++) {
    inputs[i].addEventListener("change", function(){
      handleBlockingTheSubmit()
    });
  }
}

function handleBlockingTheSubmit(){
  if(document.getElementById("dateTo").value !== "" && document.getElementById("dateFrom").value !== ""){
    document.getElementById('submitButton').disabled = false;
  }
  else{
    document.getElementById('submitButton').disabled = true;
  }
}

<form action={"someaction"} method="post">
        <Row>
          <Col xs={4}><b>Start date of the period</b></Col>
          <Col xs={6}>
            <form name="dateFrom">
            <input className="form-control" js-validate id="dateFrom" name="reportFrom" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={4}><b>End date of the period</b></Col>
          <Col xs={6}>
            <form name="dateTo">
            <input className="form-control" js-validate id = "dateTo" name="reportTo" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={1}/>
          <Col xs={5}><input disabled className="btn btn-primary" id="submitButton" type="submit" value="Submit data"/></Col>
                   //THIS SUBMIT BUTTON MUST BE DISABLED IF "dateFrom" OR 
                   //"dateTo" IS EMPTY
        </Row>
      </form>

Answer 4

//method 1
//setInterval(validateForm, 500);

//method 2
var myinput = document.querySelectorAll('input[type="date"]');
for(var i=0; i<myinput.length; i++)
  myinput[i].addEventListener('change', validateForm);

function validateForm(){
  var sbm = document.querySelectorAll('input[type="submit"]')[0];
  var df = document.getElementById('dateFrom').value;
  var dt = document.getElementById('dateTo').value;
  (df==="" || dt==="")?(sbm.disabled = true):(sbm.disabled = false);
}

<form action={"someaction"} method="post">
        <Row>
          <Col xs={4}><b>Start date of the period</b></Col>
          <Col xs={6}>
            <form name="dateFrom">
            <input  className="form-control" id="dateFrom" name="reportFrom" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={4}><b>End date of the period</b></Col>
          <Col xs={6}>
            <form name="dateTo">
            <input  className="form-control" id = "dateTo" name="reportTo" type="date" />
            </form>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col xs={1}/>
          <Col xs={5}><input className="btn btn-primary" type="submit" value="Submit data" disabled/></Col>
        </Row>
      </form>