我正在做一个php任务。我在表单输入上有个问题。基本上，我需要建立一个计算器，需要三个输入，距离，速度和时间花费。如果用户输入距离和速度，则计算时间;如果用户输入时间和速度，则计算距离。如果用户只输入一次，将会有一个错误信息提醒用户输入足够的值。
我无法把上面的内容写成一种形式。相反，我将三个表单放入一个html文件中。
<html>
<head>
<title>Distance,Speed,Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h4>Time from Distance and Speed</h4>
<form method="POST" action="calculation.php" >
<table>
<tr>
<td>distance :</td>
<td><input type=text name=distvalue size="15" value="" onfocus="clearcell(this.value)"></td>
</tr>
<tr>
<td>speed :</td>
<td><input type=text name="speedvalue" size="15" value="" onfocus="clearcell(this.value)"></td>
</tr>
</table>
<table>
<tr>
<td>Time is :</td>
<td><input type="text" name="hourvalue" size="5" value="" readonly></td>
<td>Hours</td>
<td><input type="text" name="hourvalue" size="5" value="" readonly></td>
<td>Minutes</td>
<td><input type="text" name="hourvalue" size="5" value="" readonly></td>
<td>Seconds</td>
</tr>
</table>
<input type=button value="Calculate" >
<input type=button value="Reset" >
</form>
<hr>
<h4>Distance from Speed and Time</h4>
<form method="POST" action="calculation.php">
<table>
<tr>
<td>speed :</td>
<td><input type="text" name="speedvalue" size="15" value="1" onfocus="clearcell(this.value)"></td>
</tr>
</table>
<table>
<tr>
<td> time:</td>
<td><input type="text" name=hourvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Hours</td>
<td><input type="text" name=minutevalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Minutes</td>
<td><input type="text" name=secondvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Seconds</td>
</tr>
</table>
<table>
<tr>
<td>Distance is :</td>
<td><input type=text name=distvalue size=15 value="" readonly></td>
</tr>
</table>
<input type=button value="Calculate" >
<input type=button value="Reset" >
</form>
<hr>
<h4>Speed from Distance and Time</h4>
<form method="POST" action="calculation.php">
<table>
<tr>
<td> distance :</td>
<td><input type=text name=distvalue size=15 value="1" onfocus="clearcell(this.value)"></td>
</tr>
</table>
<table>
<tr>
<td> time:</td>
<td><input type=text name="hourvalue" size=5 value="0" onfocus="clearcell(this.value)"></td>
<td>Hours</td>
<td><input type=text name=minutevalue size=5 value="0" onfocus="clearcell(this.value)"></td>
<td>Minutes</td>
<td><input type=text name=secondvalue size=5 value="0" onfocus="clearcell(this.value)"></td>
<td>Seconds</td>
</tr>
</table>
<table>
<tr>
<td>Speed is :</td>
<td><input type=text name=speedvalue size=15 value="1" readonly></td>
</tr>
</table>
<input type=button value="Calculate" >
<input type=button value="Reset" >
</form>
</body>
</html>在我的php部分，我打算单独计算。例如计算时间:
$distance = filter_input("disvalue");
$speed =filter_input("speedvalue");
$time = $distace / $speed ;
function convertTime($time)//
{
$seconds = ($dec * 3600);
$hours = floor($dec);
$seconds -= $hours * 3600;
$minutes = floor($seconds / 60);
$seconds -= $minutes * 60;
Return "YOu spent"$hours."hours,"$seconds."seconds and"$seconds.seconds".
但它根本没有计算。
我想知道是否有人可以帮助我找到一个简单的方法来做这个任务与较短的代码。
这里有一些提示，教你如何使用ajax…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ini helper</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#stepOne').click(function(event) {
var speed = $("#speedvalue").val();
var dist = $("#distvalue").val();
var hour = $("#hourvalue").val();
var min = $("#minutevalue").val();
var sec = $("#secondvalue").val();
var seconds = parseInt(hour * 3600) + parseInt(min *60) + parseInt(sec) ;
if(speed == 0 || speed =='' ){
if(seconds == 0 || dist =='' || dist ==0){
alert('Must input time and distance');
return false;
}else{
//apply your logic here Or give a ajax request to your php page
var fData = $('#ajaxForm').serialize();
var actionName = '_process/processText.php';
$.ajax({
type : 'POST',
url : actionName,
data : fData,
dataType : 'html',
encode : true
})
.done(function(data) {
$("#speedvalue").val(data);
})
.always(function(data){
console.log(data);
})
.fail(function(data) {
console.log(data);
});
}
}else if(seconds == 0){
//validate distance then calculate time with ajax request...
//do it yourself
alert('what is the time?');
}else {
//calculate dist with ajax request...
alert('what is the distance?');
}
event.preventDefault();
return false;
});
});//end of ready function
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> <h1>Distance from Speed and Time</h1><hr/></div>
<div class="col-md-12">
<form method="POST" class="form-horizontal atiqFormStyle" id="ajaxForm">
<table>
<tr>
<td>speed :</td>
<td><input type="text" id="speedvalue" name="speedvalue" size="15" value="1" onfocus="clearcell(this.value)"></td>
</tr>
</table>
<table>
<tr>
<td> time:</td>
<td><input type="text" id="hourvalue" name=hourvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Hours</td>
<td><input type="text" id="minutevalue" name=minutevalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Minutes</td>
<td><input type="text" id="secondvalue" name=secondvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Seconds</td>
</tr>
</table>
<table>
<tr>
<td>Distance is :</td>
<td><input type=text name="distvalue" name=distvalue size=15 value="0"></td>
</tr>
</table>
<button id="stepOne" class="btn btn-success"> Calculate </button>
<input type=button value="Reset" >
</form>
</div>
</div>
<div class="row">
<div class="col-md-12" id="result"></div>
</div>
</div>
</body>
</html>
或者你可以在没有javascript验证的情况下发送整个表单，然后进行所有php验证和计算…注意这里数据类型是json所以需要在php中这样写action [$data['flag'] ='speed' $data['result'] ='result'; echo json_encode($data);]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form ini helper</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#stepOne').click(function(event) {
var fData = $('#ajaxForm').serialize();
var actionName = '_process/processText.php';
$.ajax({
type : 'POST',
url : actionName,
data : fData,
dataType : 'json',
encode : true
})
.done(function(data) {
if(data.flag == 'speed')
$("#speedvalue").val(data);
else if(data.flag == 'time'){
//set the times value
}else if(data.flag == 'dist'){
//set the distance value
}
})
.always(function(data){
console.log(data);
})
.fail(function(data) {
console.log(data);
});
});
});//end of ready function
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> <h1>Distance from Speed and Time</h1><hr/></div>
<div class="col-md-12">
<form method="POST" class="form-horizontal atiqFormStyle" id="ajaxForm">
<table>
<tr>
<td>speed :</td>
<td><input type="text" id="speedvalue" name="speedvalue" size="15" value="1" onfocus="clearcell(this.value)"></td>
</tr>
</table>
<table>
<tr>
<td> time:</td>
<td><input type="text" id="hourvalue" name=hourvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Hours</td>
<td><input type="text" id="minutevalue" name=minutevalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Minutes</td>
<td><input type="text" id="secondvalue" name=secondvalue size="5" value="0" onfocus="clearcell(this.value)"></td>
<td>Seconds</td>
</tr>
</table>
<table>
<tr>
<td>Distance is :</td>
<td><input type=text name="distvalue" name=distvalue size=15 value="0"></td>
</tr>
</table>
<button id="stepOne" class="btn btn-success"> Calculate </button>
<input type=button value="Reset" >
</form>
</div>
</div>
<div class="row">
<div class="col-md-12" id="result"></div>
</div>
</div>
</body>
</html>