Question

大家好日子。

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

我有2个日期输入和＆＃34;提交＆＃34;下面的按钮，如果其中一个输入（或两个）都为空，则必须禁用该按钮。

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

如何实现这一目标？

提前感谢您的合作

Answer 1

首先为您的提交按钮分配ID，并在验证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; }
}

这必须附在表格的提交上，以防止通过点击进入提交。您还必须将此功能附加到onkeypress（我必须检查这是否是正确的事件类型（更新：it seems to be），因为关键事件总是混淆了地狱般的我或者有一个定时器设置来不时运行该功能。

<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

试试这个......：）

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

4 个答案: