posting to database via ajax

Question

I have a js function to update the database according to values from the select input fields. This is the javascript function:

            function getStatusAction()
            {
              var matchId = $(this).attr('match-id');
              var status = jQuery('#match-status').val();
              jQuery.ajax({
                url:'../core/match_stat.php',
                type:'POST',
                data:{matchId:matchId,status:status},
                success: function(data){
                    //alert("Ok");
                },
                error: function(){
                    alert("Error..");
                },
              });
            }
            jQuery('select[name="match-status"]').change(getStatusAction);

Part of the html:

                <tr>
                    <td>
                        <select class="input" name="match-status" match-id="<?=$ActiveMatch['id'];?>" id="match-status">
                            <option value="3" <?= (($ActiveMatch['status'] == '3')?'selected':'')?>> </option>
                            <option value="1" <?= (($ActiveMatch['status'] == '1')?'selected':'');?> >won</option>
                            <option value="2" <?= (($ActiveMatch['status'] == '2')?'selected':'');?> >lost</option>
                        </select>
                    </td>
                </tr>

The function is supposed to get the id of the match eg 1,2... and the status eg 1,2,3 for loose, win and default status respectively. The problem is I can only update the first row of data. If I try doing so on another row of data, the values from the first call are used. For example if I update first row status to win, if I try updating second row to loose it is updated to win. The status of the previous operation. How can I solve this?

Answer 1

you can try

        function getStatusAction(Element)  //<< add parameter here 
        {
          var matchId = $(Element).attr('match-id');  // <<< use it here
          var status = jQuery('#match-status').val();
          jQuery.ajax({
            url:'../core/match_stat.php',
            type:'POST',
            data:{matchId:matchId,status:status},
            success: function(data){
                //alert("Ok");
            },
            error: function(){
                alert("Error..");
            },
          });
        }
        jQuery('select[name="match-status"]').on('change' , function(){
           getStatusAction(this);  // << use the function here
        });

Note: id should be unique so if you have only one element with id match-status its fine .. but if your selects have the same id you need to change id="match-status" to class="match-status" and change var status = jQuery('#match-status').val(); to var status = $(Element).val();