자바 스크립트를 사용하여 여러 텍스트 상자 채우기

Question

자바 스크립트 신참 여기에 있습니다. 나는 성/이름과 조회/취소 버튼이있는 작은 페이지가 있습니다. 페이지에는 아래에 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> 

그래서 기록 자바 스크립트의 소량 .... 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");