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

时间:2018-01-14 18:24:43

标签: javascript php jquery

我有clockpicker(https://weareoutman.github.io/clockpicker/)作为在我的php页面上输入时间的工具,它包含许多类似但独特的字段。

它的工作原理如下:

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

这是我用来获取变量数据的脚本:

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

我需要以某种方式从html获取数据并将其传递给javascript ... 所以:

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

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

我怎么能完成这么糟糕的任务呢?请帮忙。

1 个答案:

答案 0 :(得分:1)

可悲的是,在查看源代码时,该插件未通过afterDone回调任何有用。因此,为了知道哪些输入与之相关,我们将不得不以更冗长的方式解决问题:

// 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
            });
        }
    });
});