Jquery with many buttons call a function with sending different parameters

Question

I have a simple code but cant get the values of my input text. Is there any way to do this?

<?php

    for ($i=0;$i<3;$i++){
        echo ('<input type="text" class="form-control" name="vec" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
        echo ('<input type="text" class="form-control" name="drv" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
        echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
    }
?>

<script>
function refreshVec(i,vell){
    alert (i + " "+ vell);
    var value0 = $("#vec"+i).val();
    var value1 = $("#drv"+i).val();
    alert (value0 + " " + value1);
}

</script>

Answer 1

You garbled the HTML by also using double quotes in the onclick attribute. You should see it in the generated HTML.

Try

echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');"></button>');

instead of

echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');

Answer 2

You should call as an array of inputs. Like,

  echo('<input type="text" class="form-control" name="vec[]" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
  echo('<input type="text" class="form-control" name="drv[]" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
  echo('<button type="button" name="updateVecButton[]" id="updateVecButton" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"/>'.$vec[$i].','.$vell[$i].'</button>');

Change name="vec" and name="drv" As name="vec[]" and name="drv[]"

In your ( onclick="refreshVec("'.$i.'","'.$vell[$i].'");

you should change as

onclick="refreshVec(\\''.$i.'\\',\\''.$vell[$i].'\\');

As I think, the reason is you passing parameters with string values.

Answer 3

I don't know why but there is space present between refreshVec( " 2" ,"2") .

This makes string like " 2" and not "2"

That's why ID selector is selecting wrong id containing that space and you are not getting expected output

I corrected it and it is working now:

echo '<button onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');">'.$vec[$i].','.$vell[$i].'</button>';

Note : buttons don't have attribute like value . You should put text inside <button> tag

Answer 4

My solution is

$(this).prop("value");

The .val() is another thing. Thanks for your support.