php формирует три входа, выбирает два и рассчитывает третий согласно первым двум

1

Я работаю над задачей 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".

Но он совсем не рассчитывал.

Мне интересно, может ли кто-нибудь помочь мне найти простой способ выполнить эту задачу с более коротким кодом.

  • 0
    сохраните 3 ввода в одной форме, иначе вы не получите их все за одну отправку. Когда вы получаете, вы проверяете, что пусто, что заполнено: ìf($_POST['distvalue']){ ...} else {...}; if ($_POST['hourvalue ']){...}else{...}...
Теги:

1 ответ

0

вот подсказки, как вы можете это сделать с помощью 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню