php form three inputs, choose two and calculate the thrid one according to thefist two
Question
I am working on a php task. And I have a problem on the form input. Basically, I need to build a calculator that requires three inputs, Distance, Speed and Time Spent. If user inputs distance and speed, it will calculate the time, If user inputs time and speed, it will calculate distance eg. If user only gives one input, there will be a error message to remind the user to give enough inputs.
I can not make the above into one form. Instead, I made three forms into one html file.
<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 in my php part, I am planning to calculate seperately. For example calclulating time:
$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".
But it did not calculate at all.
I am wondering if some one could help me to find an easy way to do this task with shorter code.
1 answers
solution1
0 2015-10-11 05:29:14
here is hints how you can do it with 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>
Or you can send whole form without javascript validation then do all php validation and calculation... careful here data type is json so you need to do code like this in 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Two image inputs in one form
Combine two inputs into one form
PHP Upload Two Different File Types Using One Form With Two Different Inputs Into Two Different Directories
Converting a number (1, 2, 3) to a string (one, two, three) in PHP
Calculate percentage of two inputs in laravel
Q: Calculate two inputs with javascript
One form and two actions and two submit in php
PHP: how can I share one drop-down menu with two separate form inputs (one textarea, one file upload)
Make a form with two buttons from a php file to choose an action
Two Form Actions In One Form PHP
Related Tags