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

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

Answer 1

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.

Answer 2

you can get value with this
score.each (function () {
console.log(this.value);
});