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.

Answer 1

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