JavaScript：如果输入为空（没有JQuery等），则禁用提交按钮

大家好

我试图找到答案，但我找到的大多数选项都使用JQuery。不幸的是，我不能在这个特定的任务中使用它，只有HTML+纯JS

我有2个日期输入和下面的“提交”按钮，如果其中一个输入（或两者）为空，则必须禁用该按钮

<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>

期间开始日期


期间结束日期


//如果“dateFrom”或
//“dateTo”为空

如何做到这一点

---

提前感谢您的合作

首先为您的提交按钮分配id，并在验证js上添加以下行

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

这将必须附加到表单的onsubmit，以防止通过点击enter提交。您还必须将此功能附加到onkeypress（我必须检查这是否是正确的事件类型（更新：），因为关键事件总是让我非常困惑），或者设置一个计时器，以便不时运行此功能

<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>

期间开始日期


期间结束日期

试试这个…：）

window.onload=function（）{
var inputs=document.queryselectoral（“[js validate]”）；
对于（变量i=0，len=inputs.length；i

期间开始日期


期间结束日期


//如果“dateFrom”或
//“dateTo”为空

//方法1
//设置间隔（validateForm，500）；
//方法2
var myinput=document.querySelectorAll（'input[type=“date”]”）；
对于（var i=0；i
<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>