Блог

Привет всем, я знаю, что этот вопрос уже задавался несколько раз, но я застрял с этой проблемой. У меня есть следующие строки кода:

 <tr>
                <td>Nome Hw:</td>
                <td><INPUT class="clickableElement" TYPE="TEXT" NAME="nomeHw" size="50" value="<?php echo $rowHWCFG['NOMEHARDWARE']; ?>" readonly></td>

                <td>amp;nbsp;</td>
                <td>amp;nbsp;</td>
                <td>Quantitamp;agrave;</td>
                <td class="hardwareQuantity"><INPUT TYPE="TEXT" NAME="versione" size="20" value="<?php echo $rowHWCFG['QUANTITAHARDWARE']; ?>" readonly></td>
                <td >Valida dal</td>
                <td><INPUT TYPE="TEXT" NAME="validaDalHw" size="15" value="<?php echo $rowHWCFG['VALIDADALHW']; ?>" readonly>
                </td>
                <td >Valida al</td>
                <td><INPUT TYPE="TEXT" NAME="validaAlHw" size="15" value="<?php echo $rowHWCFG['VALIDAALHW']; ?>" readonly></td>
                <td>amp;nbsp;</td>
                <td>amp;nbsp;</td>
            </tr>
  

В Jquery я использовал функцию «.bind» для привязки «события щелчка» к первому входному сигналу (не обращайте внимания на селектор .floatingMenuTable:eq (2):

 $('.floatingMenuTable:eq(2) input.clickableElement').bind("click", function() {

                    var nome_HW = $(this).val();

                    var quantita_HW = $(this).parent().find('.versione').val();

                    alert("Nome Hw:"   nome_HW   " Quantita:"   quantita_HW);
                    //showEditDetailItemMenu(this,'edit',nome_HW,quantita_HW);
            });
  

Используя этот код, я могу получить значение «nome_HW», но не получается получить значение второго ввода с именем «quantitaHW». Итак, пожалуйста, может ли кто-нибудь помочь мне написать правильную функцию? Заранее благодарю вас!

я изменил некоторые инструкции php для запуска в этом фрагменте. значение теперь отображается в предупреждении, как вы и ожидали.

пожалуйста, исправьте селектор jquery для класса и идентификатора внутри функции click.

 $('input').bind("click", function() {

                    var nome_HW = $(this).val();

                    var quantita_HW = $(this).parent().find('#nomeHw').val();

                    alert("Nome Hw:"   nome_HW   " Quantita:"   quantita_HW);
                    //showEditDetailItemMenu(this,'edit',nome_HW,quantita_HW);
            });  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
              <label for="nomeHw">Nome HW:</label>
              <select id="nomeHw"  name="nomeHw" onchange="" required>
              <option>1</option>
              </select>amp;nbsp;amp;nbsp;

              <label for="quantitaHW">Quantità</label>
              <input class="quantitaHW" id="quantitaHW" name="quantitaHW" type="text" value="text" /> amp;nbsp;amp;nbsp;

            </p>  

Укажите каждый ввод, выберите и т.д. класс, который они все разделяют (напр. .control ). Делегируйте событие изменения <form> тегу (у вас должен быть один) (напр. #main ). .map() выводите значения.

 /*
When a user enters or changes any value of any .control...
an array of numbers and strings is returned.
*/
$('#main').on("change", function(event) {
  var arr = $('.control').map(function(idx, obj) {
    return Number($(this).val()) || $(this).val();
  });
  console.log(JSON.stringify(arr.toArray()));
  return arr;
});  

 <form id='main'>
  <fieldset>

    <legend>HW</legend>

    <label for="nameHW">Name: </label>
    <select id="nameHW" name="nameHW" class='control' required>
      <option value=''>Pick</option>
      <option value='H'>H</option>
      <option value='W'>W</option>
      <option value='HW'>HW</option>
    </select> amp;nbsp;amp;nbsp;

    <label for="qtyHW">Quantity: </label>
    <input id="qtyHW" name="qtyHW" class='control' type="number" value="0" min='0' max='99'>

  </fieldset>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  

Я решил, используя следующую инструкцию:

 // Edit the Hw Config
$('.floatingMenuTable:eq(2) input.clickableElement').bind("click", function() 
{

  var nome_HW = $(this).val();

  var quantita_HW = $(this).parent().siblings('td.hardwareQuantity').find('input').val();

  alert("Nome Hw:"   nome_HW   " Quantita:"   quantita_HW);

});
  

Что я могу предложить из своего опыта, так это НАРИСОВАТЬ НА БУМАГЕ ЭЛЕМЕНТ $ (this) Щелчок и создание целевого элемента, рисующего все элементы DOM, необходимые для перехода ОТ A к B.
Итак, в моем примере:

 $(this) -> click on the input field with name attribute: "nomeHw" and with class: "clickableElement"

parent() -> Move inside the Dom selecting the "td" element that contains the input field "nomeHw"

siblings('td.hardwareQuantity') -> move to the sibling with classname "hardwareQuantity" 

find('input') -> find the input close to that td with classname "hardwareQuantity"