JavaScriptを使用して複数のテキストボックスを入力する

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");