PHP的形式三个输入，选择两个，并根据第二拳计算第三

Question

I am working on a php task. 我正在从事php任务。 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文件。

 <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. 在我的php部分中，我计划单独进行计算。 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. 我想知道是否有人可以帮助我找到一种使用较短代码完成此任务的简单方法。

Answer 1

here is hints how you can do it with ajax... 这是如何使用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);] 或者，您可以不通过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>

PHP的形式三个输入，选择两个，并根据第二拳计算第三

问题描述

1 个解决方案

解决方案1
0 2015-10-11 05:29:14

PHP的形式三个输入，选择两个，并根据第二拳计算第三

问题描述

1 个解决方案

解决方案1 0 2015-10-11 05:29:14

解决方案1
0 2015-10-11 05:29:14