如果输入文本不在数据列表中,则禁用提交

时间:2019-12-06 15:53:26

标签: javascript input submit datalist

如果在此输入中输入的文本不在datalist中,我想禁用此提交按钮。

<label><h5>Code application</h5></label>
<input
  name="applicationCodeId"
  id="applicationCodeId"
  list="applicationCodeList"
  class="disableAutoComplete"
/>
<datalist id="applicationCodeList">
  <div th:each="applicationCode : ${applicationCodes}">
    <option
      name="applicationCodeId"
      th:text="${applicationCode.applicationCodeName}+ ' : ' +${applicationCode.projectName}"
      th:value="${applicationCode.getId()}"
    ></option>
  </div>
</datalist>

1 个答案:

答案 0 :(得分:0)

您可以依赖提交按钮/输入的dd = {'Time':'first', 'Open':'first', 'High':'max', 'Low':'min', 'Close':'last', 'NumberOfTrades':'sum'} df['grp'] = (df['NumberOfTrades'].cumsum() % 150).eq(0)[::-1].cumsum() df.groupby(by='grp', sort=False)[['Time','Open','High','Low','Close','NumberOfTrades']].agg(dd).reset_index(drop=True) 属性:每次修改输入内容时都对其进行更新。一个选项是使用disabled检查当前文本是否与选择器querySelector匹配选项值。像这样:

option[value="..."]
function myFunction() {
  const currentValue = document.getElementById('applicationCodeId').value;
  document.getElementById("mySubmit").disabled =
    currentValue.length === 0 ||
    document.querySelector('option[value="' + currentValue + '"]') === null;
}

请注意,在使用<label><h5>Code application</h5></label> <input name="applicationCodeId" id="applicationCodeId" list="applicationCodeList" class="disableAutoComplete" oninput="myFunction()" /> <datalist id="applicationCodeList"> <option value="Option 1"> <option value="Option 2"> </datalist> <input type="submit" id="mySubmit" disabled>时,选项值优先于文本:您可以在输入中键入文本,但是它将替换为该值。这就是上述解决方案基于值的原因:)


请注意,数据列表应仅包含<datalist>个元素:否<option>(请参阅documentation)。名称也可以在选项中删除。

由于上述解决方案适用于value属性,因此您的代码可能变为:

<div>

您将不得不在服务器端获取ID;)