[英]php form three inputs, choose two and calculate the thrid one according to thefist two
我正在從事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操作[$data['flag'] ='speed' $data['result'] ='result'; echo json_encode($data);]
[$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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.