Filling multiple textboxes using javascript

Question

Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.

I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.

Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:

  <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>

So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.

Please note that `java` != `javascript` when tagging your questions. http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java — mrtsherman, Dec 14 '11 at 16:45
Sorry about that, I am used to questions requiring three tags. Thanks for removing it — Mr Man, Dec 14 '11 at 16:49

score 2 · Accepted Answer · answered Dec 14 '11 at 16:44

2

I think you want something like

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;
       } 
}

Or the jQuery way, if you're using it, or plan to try it:

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

answered Dec 14 '11 at 16:44

Adam Rackis

82,527
56
270
393

Thanks for the answer. How would I implement this into the current code....like, how would I get the value of the search results into the correct textbox. Could I put the *initFieldDivs()* function into the *value=""* section of the code? – Mr Man Dec 14 '11 at 16:48
So, if you want to fill the next text box with search results after the user clicks button 'foo' - then you could call this function as an event handler to foo – Adam Rackis Dec 14 '11 at 16:50

Filling multiple textboxes using javascript

1 Answers1