从id =和value =的<input>动态值中获取并使它们变量以在javascript中使用它们

Question

I have clockpicker (https://weareoutman.github.io/clockpicker/) as a tool to input time on my php page, which contains a lot of similar but unique fields.

It works like this:

<?php while // ...extracting data from mysql

// and we have got a lot of "cards" (Their quantity is not constant and there can be from 30 to 100 cards), each one of them has unique card_numuber and card_time
echo <div id='card'> ;
echo <div id='$row['card_numuber']'> $row['card_numuber']</div> ;
echo <div class='input-group clockpicker-with-callbacks'><input id='$row['card_numuber']' type='text' class='form-control' value=".$row['card_time']."></div>;
echo </div> ;
?>

And this is my script I use to get data to variables:

<script type="text/javascript">
$('.clockpicker-with-callbacks').clockpicker({
        donetext: 'Done',
        afterDone: function() {
        var card_time = ??? // here is I have no idea how to get the~ <input value=".$row['card_time']."> 
        var card_numuber = ??? // and here I've got no clue how to mage var from dynamic id='$row['card_numuber']' value

        console.log(card_numuber, card_time);
        $.post( "2_settime.php", { 
            card_numuber: card_numuber, card_time: card_time
        })

        }
    })
</script>

I need somehow to get the data... from html and pass it to javascript... So:

card_time IS value=".$row['card_time']."

card_numuber IS id='$row['card_numuber']'

How can I get this such a horrible task done? Please, help.

Answer 1

Sadly, looking at the source, that plugin doesn't pass the afterDone callback anything useful. So in order to know what input is related to it, we'll have to hook things up in a more verbose way:

// Normally, you'd avoid using `each` like this, but sadly this plugin calls
// its callbacks with NO context information
$('.clockpicker-with-callbacks').each(function() {
    var input = $(this).find("input")[0];
    $(this).clockpicker({
        donetext: 'Done',
        afterDone: function() {
            var card_time = input.value; // The current value of the input
            var card_numuber = input.id; // The input's ID

            console.log(card_numuber, card_time);
            $.post( "2_settime.php", { 
                card_numuber: card_numuber, card_time: card_time
            });
        }
    });
});