Question

Javascript菜鸟在这里。我有一个小页面，其中包含名字/姓氏和查找/清除按钮。该页面下面有15个文本框。

我希望用户能够搜索名字和姓氏，并填写下一个空文本框。

目前用户可以搜索一个人，并填写第一个文本框，但如果他们再次搜索....它将只替换第一个文本框中的内容。这是我的相关代码：

  <form name="isForm" action="">
<table width="75%"  border="0" cellspacing="0">
  <tr>
    <td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
  </tr>
  <tr>
    <td>Last Name:
      <input type="hidden" id=queryType name=queryType value="P" />
      <input type="text" size="20" autocomplete="off" id="searchField" name="searchField"  />
    </td>      
    <td>First Name:
      <input type="text" size="20" autocomplete="off" id="firstField" name="firstField"  />
    </td>      
    <td align="center" valign="bottom">
      <input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle" 
             onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);              
                      document.getElementById('nameField').innerHTML='';
                      this.disabled = true;
                      doCompletion();" >
    </td>
    <td><div id="nameField"></div></td>
  </tr>
  <tr>
    <td colspan="4">
      <table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
      </table>
    </td>
  </tr>
    <td colspan="3">&nbsp;</td>
  </tr>
</table>
<table width="75%"  border="0" cellspacing="0">
  <tr>
    <td colspan="3" class="columnHeaderClass">ID(s)</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td align="right"><input name="Student_ID" type="text" id="idField" /></td>
    <td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
    <td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
  </tr>
  <tr>
    <td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
    <td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
    <td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
  </tr>
  <tr>
    <td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
    <td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
    <td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
  </tr>
  <tr>
    <td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
    <td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
    <td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
  </tr>
  <tr>
    <td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
    <td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
    <td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="submit">
        <input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S"> 
      </div>
    </td>
  </tr>
</table>

所以写的少量javascript .... initFieldDivs（）抓取被选中的人的id并将其放入第一个文本框（我想解决这个问题而不改变这个功能）。那么，当第一个文本框已满时，是否还要转到下一个文本框？提前谢谢，请问如果您有疑问，我知道这很令人困惑。

Answer 1

我想你想要像

这样的东西

function fillNextEmptyTb() {
    var allInputs = document.getElementsByTagName("input");
    for (var i = 0; i < allInputs.length; i++)
       if (allInputs[i].type === "text" && allInputs[i].value == "") {
           allInputs[i].value = "whatever you want";
           return;
       } 
}

或jQuery方式，如果您正在使用它，或计划尝试它：

var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");

使用javascript填充多个文本框

1 个答案: