Я работаю над задачей 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>
ANd в моей 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);]
[$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>
ìf($_POST['distvalue']){ ...} else {...}; if ($_POST['hourvalue ']){...}else{...}...