使用javascript填充多个文本框

Javascript菜鸟在这里。我有一个名字/姓氏和查找/清除按钮的小页面。该页面下面有15个文本框。使用javascript填充多个文本框

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

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

<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，并把它放入第一个文本框（我想解决这个问题，而不改变这个功能）。那么，无论如何，当第一个已满时，还可以继续阅读下一个文本框？在此先感谢，并请询问你是否有问题，我知道这是令人困惑的。

来源

2011-12-14 Dan

请注意，`java` =` JavaScript`标记你的问题。 http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java – mrtsherman 2011-12-14 16:45:23

对不起，我习惯于需要三个标签的问题。感谢您的解答 – Dan 2011-12-14 16:49:36

我想你想要像

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

来源

2011-12-14 16:44:57

使用javascript填充多个文本框

回答

相关问题