How to get value from multiple input fields on different class?

Question

I have form like this:

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

this is the jquery script:

 $('[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 
 });

this is the php code:

<?php
include "connection.php";

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

When i keyup on score[1][], the value of weight[1][] is not coming out. PLease Help me, How to get value from multiple input fields on different class ??

onkeyup of score, if your weight has no value, what's to multiply with score on the PHP side? a blank string? — Joseph
– Joseph, Commented Mar 26, 2012 at 7:27

Milap · Accepted Answer · 2012-03-26 11:54:02Z

Your code works for me for the first group of input elements. It would not work for the second set of elements because with .val you get "the current value of the first element in the set of matched elements". So when you keyup on score[2] the JS code actually sends the values of score[1] and weight[1], which may be empty.

To fix that one easy way is to wrap an element around each group of items so that you can easily target the "associated" weight element when keyup is triggered, like this:

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

And the code would look like

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

I also changed the jQuery selectors to work with the classes in your HTML rather than the element ids; while the code should work either way, this style feels better to me.

this is : $(this).closest(".group").find('.tiga input').val(data); didnt work. Please help me?
@N4tanata: That was a bug involving $(this), sorry. See the updated code please.

emaniacs · Accepted Answer · 2012-03-26 07:43:37Z

0

you can get value with this

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

answered Mar 26, 2012 at 7:43

emaniacs

721 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to get value from multiple input fields on different class?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related