Как получить значение из нескольких полей ввода в другом классе?

Question

У меня есть такая форма:

  <div class="satu">
    <input type='text' size='1' maxlength='1' name='score[1][]' id='score[1][]'>
  </div>
  <div class="dua">
    <input type='text' size='1' maxlength='3' name='weight[1][]' id='weight[1][]'> %
  </div>
  <div class="tiga">
    <input type='text' size='5' name='weightscore[1][]' id='weightscore[1][]' disabled>
  </div>
  <div class="satu">
    <input type='text' size='1' maxlength='1' name='score[2][]' id='score[2][]'>
  </div>
  <div class="dua">
    <input type='text' size='1' maxlength='3' name='weight[2][]' id='weight[2][]'> %
  </div>
  <div class="tiga">
    <input type='text' size='5' name='weightscore[2][]' id='weightscore[2][]' disabled>
  </div>

это скрипт jquery:

 $('[id^="score"]').keyup(function() 
 {
   var score=$('[id^="score"]').val(); 
   var weight=$('[id^="weight"]').val(); 
   $.ajax({
   url: "cekweightscore.php",
   data: "score="+score+"&weight="+weight,
   success: 
   function(data)
   {
     $('[id^="weightscore"]').val(data);
   }//success
   });//ajax 
 });    

это код php:

<?php
include "connection.php";

$score = $_GET['score'];
$weight = $_GET['weight'];
$totalweightscore=(($weight * $score )/ 100);
echo"$totalweightscore";
?>

Когда я набираю очки [1] [], значение веса [1] [] не выходит. Пожалуйста, помогите мне, Как получить значение из нескольких полей ввода в другом классе ??

Answer 1

Ваш код работает для меня для первой группы элементов ввода . не будет работать для второго набора элементов, потому что с .val вы получите «текущее значение первого элемента в наборе соответствующих элементов» , Поэтому, когда вы набираете номер score[2], код JS фактически отправляет значения score[1] и weight[1], которые могут быть пустыми.

Чтобы исправить этот простой способ, нужно обернуть элемент вокруг каждой группы элементов, чтобы можно было легко нацелить «связанный» элемент веса при срабатывании keyup, например:

<div class="group">
  <div class="satu"><input type='text' name='score[1][]' id='score[1][]'></div>
  <div class="dua"><input type='text' name='weight[1][]' id='weight[1][]'> %</div>
  <div class="tiga"><input type='text' name='weightscore[1][]' id='weightscore[1][]' disabled></div>
</div>

<div class="group">
  <div class="satu"><input type='text' name='score[2][]' id='score[2][]'></div>
  <div class="dua"><input type='text' name='weight[2][]' id='weight[2][]'> %</div>
  <div class="tiga"><input type='text' name='weightscore[2][]' id='weightscore[2][]' disabled></div>
</div>

И код будет выглядеть как

<script type="text/javascript">
    $('.satu input').keyup(function () {
        var $satuInput = $(this);
        var score = $satuInput.val();
        var weight = $satuInput.closest(".group").find('.dua input').val();
        $.ajax({
            url: "cekweightscore.php",
            data: "score=" + score + "&weight=" + weight,
            success: function (data) {
                $satuInput.closest(".group").find('.tiga input').val(data);
            } //success
        }); //ajax 
    });
</script>

Я также изменил селекторы jQuery для работы с классами в вашем HTML, а не с идентификаторами элементов; в то время как код должен работать в любом случае, этот стиль мне кажется лучше.

Answer 2

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

score.each (function () {
 console.log(this.value);
});