我使用这个jquery计时器来收集它运行时花费的时间。
https://github.com/walmik/timer.jquery
如何将当前值转换为php变量？
我想点击一个按钮，在输入字段中保存当前值。
问题是当我在表单中包装输入并期望使用$ _POST [＆＃39; fieldID＆＃39;]来收集值时，它会禁用jqueryTimer。
我可以从表单中提取输入字段，但是收集jQuery提供的当前值的最佳方法是什么？编写一个脚本添加，用jQueryTimer中的当前值填充隐藏字段？
如果调用暂停和重启，也可以更新php可用的值，这将是理想的。
编辑显示代码：
<script src='https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.6.5/timer.jquery.min.js'></script>
<!-- http://jquerytimer.com/-->
<script>
$(document).ready(function(){
var hasTimer = false;
// Init timer start
$('.start-timer-btn').on('click', function() {
hasTimer = true;
$('.timer').timer({
editable: true
});
$(this).addClass('d-none');
$('.pause-timer-btn, .remove-timer-btn').removeClass('d-none');
});
// Init timer resume
$('.resume-timer-btn').on('click', function() {
$('.timer').timer('resume');
$(this).addClass('d-none');
$('.pause-timer-btn, .remove-timer-btn').removeClass('d-none');
});
// Init timer pause
$('.pause-timer-btn').on('click', function() {
$('.timer').timer('pause');
$('.resume-timer-btn').removeClass('d-none');
});
// Remove timer
$('.remove-timer-btn').on('click', function() {
hasTimer = false;
$('.timer').timer('remove');
$(this).addClass('d-none');
$('.start-timer-btn').removeClass('d-none');
$('.pause-timer-btn, .resume-timer-btn').addClass('d-none');
});
// Additional focus event for this demo
$('.timer').on('focus', function() {
if(hasTimer) {
$('.pause-timer-btn').addClass('d-none');
$('.resume-timer-btn').removeClass('d-none');
}
});
// Additional blur event for this demo
$('.timer').on('blur', function() {
if(hasTimer) {
$('.pause-timer-btn').removeClass('d-none');
$('.resume-timer-btn').addClass('d-none');
}
});
});
$('.timer').each(function() {
console.log( this.val() );
});
</script>
HTML：
<div class='row'>
<div class='col-md-3'>
<input type='text' name='timer' class='form-control timer' placeholder='0 sec' id="timer" />
</div>
<div class='col-md-9'>
<button class='btn btn-success start-timer-btn'>Start</button>
<button class='btn btn-success resume-timer-btn d-none'>Resume</button>
<button class='btn btn-secondary pause-timer-btn d-none'>Pause</button>
<button class='btn btn-danger remove-timer-btn d-none'>Remove Timer</button>
</div>
</div>
<form action="" method="" id="form1">
<input type="submit">
<input name="currentTime" type="hidden" id="currentTime" value="needed">
</form>
目标：能够将当前值作为php var，以便将其提交给数据库。
之前的尝试发现，如果输入位于表单标记内，则不再有效。
考虑的想法是在某些点击上更新隐藏的输入字段，这样就可以在PHP中使用它来插入数据库。
答案 0 :(得分：1)
这是我的建议。它确实基于执行ajax请求。当然，在这种情况下不需要表格。正如已经评论过的那样，通过提交表单，与当前页面中的计时器相关的所有信息都将丢失，因为提交将刷新计时器所在的整个页面，或者甚至会重定向到另一个页面 - 如果需要的话。
您可以按原样运行我的代码，但是您需要在 INSERT sql语句中更改数据库连接凭据和与db表相关的信息。
计时器位于 index.php 中。服务器端保存操作在 saveTime.php 中执行 - 我使用了PDO扩展。数据库连接在 connection.php 中创建。
在客户端，通过单击 .save-timer-btn 按钮或启动保存操作 - saveTime（）。 pause-timer-btn 按钮。但是你可以在你选择的事件上调用 saveTime（）。
如果未定义发布的计时器值，则PHP代码会发送响应标头，该标头会触发ajax请求的错误功能。然后，错误功能将显示类型危险的引导警报。如果PHP无法识别传递的计时器状态，则同样适用。如果保存操作成功，将显示成功警报。
注意：我的代码不依赖于您的代码，但它们只是略有不同。这是因为我使用了计时器的最后一个版本（ 0.7.1 ）和jquerytimer.com演示中使用的代码。我建议你注意每个代码行。对不起:-)我还使用了Bootstrap的 3.3.7 版本。
注意：为了正确的错误报告/处理，您可以阅读this和this条款，因为我没有在我的PHP代码中实现它。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo - Timer</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.1/timer.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var hasTimer = false;
/**
* Save the current timer value.
*
* Performs an ajax request to the server, which will
* save the timer value in a database table and return
* a corresponding message.
*/
function saveTime() {
$.ajax({
method: 'post',
dataType: 'html',
url: 'saveTime.php',
data: {
'time': $('.timer').data('seconds'),
'state': $('.timer').data('state')
},
success: function (response, textStatus, jqXHR) {
displayAlert('success', response);
},
error: function (jqXHR, textStatus, errorThrown) {
/*
* If the status code of the response is the custom one
* defined by me, the developer, in saveTime.php, then I
* can display the corresponding error message. Otherwise,
* the displayed message will be a general user-friendly
* one - so, that no system-related infos will be shown.
*/
var message = (jqXHR.status === 420)
? jqXHR.statusText
: 'An error occurred during your request. Please try again.';
displayAlert('danger', message);
},
complete: function (jqXHR, textStatus) {
//...
}
});
}
/**
* Display a bootstrap alert.
*
* @param type string success|info|warning|danger.
* @param message string Alert message.
* @return void
*/
function displayAlert(type, message) {
var alert = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">'
+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'
+ '<span aria-hidden="true">×</span>'
+ '</button>'
+ '<span>' + message + '</span>'
+ '</div>';
$('.messages').html(alert);
}
// Init timer start
$('.save-timer-btn').on('click', function () {
saveTime();
});
// Init timer start
$('.start-timer-btn').on('click', function () {
hasTimer = true;
$('.timer').timer({
editable: true
});
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer resume
$('.resume-timer-btn').on('click', function () {
$('.timer').timer('resume');
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer pause
$('.pause-timer-btn').on('click', function () {
$('.timer').timer('pause');
$(this).addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
saveTime();
});
// Remove timer. Leaves the display intact.
$('.remove-timer-btn').on('click', function () {
hasTimer = false;
$('.timer').timer('remove');
$(this).addClass('hidden');
$('.start-timer-btn').removeClass('hidden');
$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
});
// Additional focus event for this demo
$('.timer').on('focus', function () {
if (hasTimer) {
$('.pause-timer-btn').addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
}
});
// Additional blur event for this demo
$('.timer').on('blur', function () {
if (hasTimer) {
$('.pause-timer-btn').removeClass('hidden');
$('.resume-timer-btn').addClass('hidden');
}
});
});
</script>
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4>
Timer Demo
</h4>
</div>
</div>
<div class="row">
<div class="col-xs-6 messages"></div>
</div>
<div class="row">
<div class="col-md-3">
<input type="text" id="timer" name="timer" class="form-control timer" placeholder="0 sec">
</div>
<div class="col-md-9">
<button type="button" class="btn btn-success start-timer-btn">
Start
</button>
<button type="button" class="btn btn-success resume-timer-btn hidden">
Resume
</button>
<button type="button" class="btn pause-timer-btn hidden">
Pause
</button>
<button type="button" class="btn btn-danger remove-timer-btn hidden">
Remove Timer
</button>
<button type="button" class="btn btn-primary save-timer-btn">
Save timer value
</button>
</div>
</div>
</div>
</body>
</html>
<?php
require 'connection.php';
// Validate the timer value.
if (!isset($_POST['time']) || empty($_POST['time'])) {
/*
* This response header triggers the ajax error because the status
* code begins with 4xx (which corresponds to the client errors).
* I defined 420 as the custom status code. You can choose whatever
* code between 401 and 499 which is not officially assigned, e.g.
* which is marked as "Unassigned" in the official HTTP Status Code Registry.
* See the link.
*
* @link https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml HTTP Status Code Registry.
*/
header('HTTP/1.1 420 No time value defined. Did you start the timer?');
exit();
}
// Validate the timer state.
if (!isset($_POST['state']) || empty($_POST['state'])) {
header('HTTP/1.1 420 No timer state recognized. Did you start the timer?');
exit();
}
// Read the posted values.
$time = $_POST['time'];
$state = $_POST['state']; /* The state of the timer when the saving operation was triggered. */
/*
* Save the timer value in a db table using PDO library.
*/
$sql = 'INSERT INTO my_timer_table (
time
) VALUES (
:time
)';
$statement = $connection->prepare($sql);
$statement->execute([
':time' => $time,
]);
// Print success message.
echo 'Time (' . $time . ' seconds) successfully saved when timer was ' . $state . '.';
exit();
<?php
// Db configs.
define('HOST', 'localhost');
define('PORT', 3306);
define('DATABASE', 'yourDb');
define('USERNAME', 'yourUsername');
define('PASSWORD', 'yourPassword');
define('CHARSET', 'utf8');
$connection = new PDO(
sprintf('mysql:host=%s;port=%s;dbname=%s;charset=%s', HOST, PORT, DATABASE, CHARSET)
, USERNAME
, PASSWORD
, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_EMULATE_PREPARES => FALSE,
PDO::ATTR_PERSISTENT => FALSE,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]
);
CREATE TABLE `my_timer_table` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`time` bigint(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;