Доступ к полю ввода массива HTML через JavaScript - PullRequest
Новая
       4

Доступ к полю ввода массива HTML через JavaScript

0 голосов
/ 12 ноября 2018

Следующий HTML-код ссылается на javascript для обновления другого поля ввода в той же строке на основе рассчитанных значений. Я не могу ссылаться на поле HTML, так как оно возвращается неопределенным. Проблема заключается в том, что значением входного массива HTML является NAME [EmployeeID], поэтому я передаю EmployeeID функции для ссылки на правильное поле HTML. Просто не могу понять, как отформатировать команду innerHTML. 

<script language="javascript"><!--
function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {
  if (AdvanceAmt > 0) {
    var ePay    = eWorked * eRate;

    if (ePay < AdvanceAmt) {
      document.getElementById(Amt2Adv[eID]).innerHTML = AdvanceAmt.toFixed(2);
    } else {
      document.getElementById(Amt2Adv[eID]).innerHTML = ePay.toFixed(2);
    }
  }
}
//--></script>

HTML-код 

              <tr>
                <td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
                  <tr>
                    <td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
                  </tr>
                  <tr>
                    <td align="center"><b>Select</b></td>
                    <td align="center"><b>Employee</b></td>
                    <td align="center"><b>Type</b></td>
                    <td align="center"><b>Period</b></td>
                    <td align="center"><b>Amount</b></td>
                    <td align="center"><b>Worked</b></td>
                    <td align="center"><b>Amt->Adv</b></td>
                    <td align="center"><b>Advance</b></td>
                    <td align="center"><b>GiftCard</b></td>
                  </tr>
                  <tr>
                    <td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
                    <td align="center">Joe Fabitz</td>
                    <td align="center">Cash</td>
                    <td align="center">Hourly</td>
                    <td align="center">$10.00</td>
                    <td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
                    <td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
                    <td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
                    <td align="center">0</td>
                  </tr>
                  <tr>
                    <td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
                    <td align="center">Jane Fabitz</td>
                    <td align="center">Cash</td>
                    <td align="center">Hourly</td>
                    <td align="center">$10.00</td>
                    <td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
                    <td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
                    <td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
                    <td align="center">0</td>
                  </tr>
                  <tr>
                    <td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button>&nbsp;&nbsp;<a href="https://somewhere.com/something.php?date=2018-11-09"><button type="button" name="" class="css3button">Cancel</button></a></td>
                  </tr>
                </table></form></td>
              </tr>

1 Ответ

0 голосов
/ 12 ноября 2018

Если вы хотите выбрать элемент с getElementById, вам понадобится элемент с атрибутом id, как указано CertainPerformance в комментарии.

Если вы хотите получить элементы по их имени, вы можете использовать

  • document.querySelector, который возвращает первый элемент, который соответствует указанному query или
  • document.getElementsByName, который возвращает все элементы с предоставленным name

Чтобы установить отображаемое значение input с, вам нужно будет установить value вашего input, а не innerHTML.

Кроме того, String не имеет toFixed метода, вам нужно сначала проанализировать AdvanceAmt до Number. 

function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {  
  AdvanceAmt = parseFloat(AdvanceAmt);
  
  if (AdvanceAmt > 0) {
    var ePay = eWorked * eRate;
    var selector = `input[name="amt2adv\[${eID}\]"]`;

    if (ePay < AdvanceAmt) {
      document.querySelector(selector).value = AdvanceAmt.toFixed(2);
    } else {
      document.querySelector(selector).value = ePay.toFixed(2);
    }
  }
}
<table>
  <tr>
    <td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tr>
        <td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
      </tr>
      <tr>
        <td align="center"><b>Select</b></td>
        <td align="center"><b>Employee</b></td>
        <td align="center"><b>Type</b></td>
        <td align="center"><b>Period</b></td>
        <td align="center"><b>Amount</b></td>
        <td align="center"><b>Worked</b></td>
        <td align="center"><b>Amt->Adv</b></td>
        <td align="center"><b>Advance</b></td>
        <td align="center"><b>GiftCard</b></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
        <td align="center">Joe Fabitz</td>
        <td align="center">Cash</td>
        <td align="center">Hourly</td>
        <td align="center">$10.00</td>
        <td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
        <td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
        <td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
        <td align="center">0</td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
        <td align="center">Jane Fabitz</td>
        <td align="center">Cash</td>
        <td align="center">Hourly</td>
        <td align="center">$10.00</td>
        <td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
        <td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
        <td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
        <td align="center">0</td>
      </tr>
      <tr>
        <td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button>&nbsp;&nbsp;<a href="https://somewhere.com/something.php?date=2018-11-09"><button type="button" name="" class="css3button">Cancel</button></a></td>
      </tr>
    </table></form></td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...