Блок калькулятор с большим количеством переменных - PullRequest
0 голосов
/ 29 ноября 2018

Я пытаюсь сделать калькулятор преобразования единиц измерения с помощью php, в основном он изменит значение 2-х баз меню выбора в главном меню выбора, что я смог сделать с помощью javascript, но я не могу обернутьмоя голова вокруг, как подойти к этому в php.В главном меню выбора загрузите различные значения в зависимости от выбранного материала, хотя мы используем одни и те же единицы измерения.Я ценю, если кто-то может направить меня в правильном направлении или поделиться некоторыми примерами кодов.

Чего я хотел достичь https://alkoutprojects.com/customer-support/conversion-calculator/ в формате ниже.

enter image description here

        <div class="container html-top form-group">
                    <h2 class="text-center">Conversion Calculator</h2>
            <form action="#" method="post" class="html-top">
                <div class="row">
                    <div class="col-4 no-gutters padding-left">
                        <label for="Material">Materials</label><br>
                        <select id="type" class="form-control">
                        <option value="item0">Select a material</option>
                            <option value="32% NaoH">32% NaoH</option>
                            <option value="50% NaoH">50% NaoH</option>
                            <option value="6% Hypo">6% Hypo</option>
                            <option value="12% Hypo">12% Hypo</option>
                            <option value="chlorine">Chlorine</option>
                            <option value="hcl">Hcl</option>

                        </select>
                    </div>

                    <div class="col-4"> 
                        <label for="">From UDM: </label><br>
                        <select id="fdm" class="form-control">

                                 <option value="">-- select one -- </option>
                        </select>

                    </div>

                    <div class="col-4 padding-right">   
                        <label for="">To UDM: </label><br>
                        <select id="tdm" class="form-control">

                                 <option value="">-- select one -- </option>
                        </select>
                    </div>      
                </div><!--/row-->
                    </br>
                <div class="row">   
                    <label for="insertvalue">Insert Value</label></br>
                    <input type="text" class="form-control">

                </div>
                </br>
                <div class="row">   
                    <label for="insertvalue">Answer</label></br>
                    <input type="text" value="Answer" class="form-control" readonly>

                </div>              
                </br>
                <div class="row padding-left no-gutters">
                <button value="submit" name="submit" class="btn btn-secondary margin-left">Submit</button>
                </div>





            </form>

        </div>



    <script type="text/javascript">
        $(document).ready(function () {
            $("#type").change(function () {
                var val = $(this).val();
                if (val == "32% NaoH") {
                    $("#fdm,#tdm").html("<option value='$val1'>M3</option><option value='$val2'>MT</option><option value='$val3'>Liter</option>");
                } else if (val == "50% NaoH") {
                    $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option>");
                } else if (val == "6% Hypo") {
                    $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option><option value='Liter'>Liter</option>");
                } else if (val == "12% Hypo") {
                    $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option><option value='Liter'>Liter</option>");
                } else if (val == "chlorine") {
                    $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option>");
                } else if (val == "hcl") {
                    $("#fdm,#tdm").html("<option value='M3'>M3</option> <option value='MT'>MT</option> <option value='Imperial Gallon'>Imperial Gallon</option> <option value='US Gallon'>US Gallon</option> <option value='liter'>liter</option>  ");
                }

            });
    });
    </script>
    </body>


  [1]: https://i.stack.imgur.com/YYAf5.jpg

Ответы [ 3 ]

0 голосов
/ 29 ноября 2018

Вы можете добавить при изменении события для основного раскрывающегося списка и после изменения сгенерировать другие значения для раскрывающихся списков.

Пример:

$( "#mainSelect" ).change(function() {
    var val = $(this).val();

    //now you compare the value and generate the other 2 drop downs.
    //(Just showing one comparison, you can do the other else if statements)

    if (val == "32% NaoH") {
        //First remove the options that is currently in the select
        $("#fdm option").remove();
        //Now you can add the options for the select as you want to.
        $("#fdm").append('<option value="yourValue">yourText</option>');
        //Do the same for your second select
        $("#tdm option").remove();
        $("#tdm").append('<option value="yourValue">yourText</option>');
    } 
});

Это с использованием чистого JQuery.Если вы хотите использовать какой-то PHP (вам не нужно), вы можете сделать то, что @yasoh прокомментировал ваш вопрос.

Надеюсь, что это имело смысл и помогло.Goodluck!

РЕДАКТИРОВАНИЕ:

HTML:

<form action="#" method="POST" id="calculations">
    <select name="firstSelect">
        <option value="value1">value1Text</option>
        <option value="value2">value2Text</option>
        <option value="value3">value3Text</option>
    </select>
    <select name="secondSelect">
        <option value="value1">value1Text</option>
        <option value="value2">value2Text</option>
        <option value="value3">value3Text</option>
    </select>
    <input type="submit" value="POST VALUES">
</form>

jQuery: (запрос ajax)

$('#calculations').submit(function(e){
    e.preventDefault();
    var form = $('#calculations');
     $.ajax({
         url: '/includes/do_calculations.php',
         data: form.serialize(),
         dataType: 'JSON',
         type: "POST",
         success: function(data) {
             if (data.status == "Success") {
                 var answer = data.answer; //getting the answer variable from the back-end.
             }
                },
            });
        })

back-end:

Возьмите такие значения в качестве back-end:

$firstValue = trim(strip_tags($_POST['firstSelect']));
$secondValue = trim(strip_tags($_POST['secondSelect']));

$answer = $firstValue + $secondValue; //Just an example

Теперь вы можете использоватьзначения в переменных, чтобы сделать ваши расчеты по мере необходимости.Как только вы закончите, вы можете просто вернуть его обратно.

$response['status'] = 'Success';
$response['answer'] = $answer; // You are posting the answer back and then you can use it in your front-end again.
echo json_encode($response);
0 голосов
/ 29 ноября 2018

Я выбрал другой подход и получил нужные мне результаты. Большое спасибо за ваше время и усилия, которые действительно помогают мне сузить кругозор.Мой окончательный код ниже.

<?php

if(isset($_POST['submit']))

{

$number = $_POST['number'];
$fdm = $_POST['fdm'];
$tdm = $_POST['tdm'];

        if($fdm == '32m3' && $tdm  == '32mt'){
            $answer = $number * 5 . 'MT';
        }elseif($fdm == '32m3' && $tdm  == '32l'){
            $answer = $number * 10 . 'L';
        }

        else{
            $answer = "Wrong data combination";
        }

}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Conversion Calculator</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<body>

    <div class="container html-top form-group">
                <h2 class="text-center html-top">Conversion Calculator</h2>
        <form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post" id="calculations">
            <!--<form action="#" method="post" id="calculations">-->

            <div class="row">
                <div class="col-4 no-gutters padding-left">
                    <label for="Material">Materials</label><br>
                    <select id="type" class="form-control">
                    <option value="item0">Select a material</option>
                        <option value="32% NaoH">32% NaoH</option>
                        <option value="50% NaoH">50% NaoH</option>
                        <option value="6% Hypo">6% Hypo</option>
                        <option value="12% Hypo">12% Hypo</option>
                        <option value="chlorine">Chlorine</option>
                        <option value="hcl">Hcl</option>

                    </select>
                </div>

                <div class="col-4"> 
                    <label for="">From UDM: </label><br>
                    <select name="fdm" id="fdm" class="form-control">
                             <option value="">-- select one -- </option>
                    </select>

                </div>

                <div class="col-4 padding-right">   
                    <label for="">To UDM: </label><br>
                    <select name="tdm" id="tdm" class="form-control">

                             <option value="">-- select one -- </option>
                    </select>
                </div>      
            </div><!--/row-->
                </br>
            <div class="row">   
                <label for="insertvalue">Insert Value</label></br>
                <input id="number" name="number" required type="text" class="form-control">

            </div>
            </br>
            <div class="row">   
                <label for="insertvalue">Convert Value</label></br>             
                <input type="text" id="answer" name="answer" value="<?php echo (isset($answer))?$answer:'';?>" class="form-control" readonly>

            </div>              
            </br>
            <div class="row padding-left no-gutters">
            <button value="submit" name="submit" class="btn btn-secondary margin-left">Submit</button> 
            <a class="btn btn-secondary margin-left-button" href="index.php">Reset</a>
            </div>


        </form>

    </div>



<script type="text/javascript">
    $(document).ready(function () {
        $("#type").change(function () {
            var val = $(this).val();
            if (val == "32% NaoH") {
                $("#fdm,#tdm").html("<option value='32m3'>M3</option><option value='32mt'>MT</option><option value='32l'>Liter</option>");
            } else if (val == "50% NaoH") {
                $("#fdm,#tdm").html("<option value='50m3'>M3</option><option value='50mt'>MT</option>");
            } else if (val == "6% Hypo") {
                $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option><option value='Liter'>Liter</option>");
            } else if (val == "12% Hypo") {
                $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option><option value='Liter'>Liter</option>");
            } else if (val == "chlorine") {
                $("#fdm,#tdm").html("<option value='M3'>M3</option><option value='MT'>MT</option>");
            } else if (val == "hcl") {
                $("#fdm,#tdm").html("<option value='M3'>M3</option> <option value='MT'>MT</option> <option value='Imperial Gallon'>Imperial Gallon</option> <option value='US Gallon'>US Gallon</option> <option value='liter'>liter</option>  ");
            }


        });
    function myFunction() {
    document.getElementById("calculations").reset();
    }    
}); 
</script>
</body>
</html>
0 голосов
/ 29 ноября 2018

Помните, что PHP рендерится на сервере, поэтому если вы сделаете это на PHP, то это будет примерно так:

  • Пользователь вставляет значение в поле

  • и затем нажимает «Submit»

  • Затем введенное значение отправляется на сервер (где выполняется PHP)

  • Затем выполняются вычисления и возвращается значение, которое отправляется обратно в браузер.

Это может выглядеть примерно так:

<?php
if( !empty( $_POST['one_value'] ){
  $one_value = $_POST['one_value'];
  $calculated_value = $one_value * 100; 
} else {
  $calculated_value = 'No value was calculated';
}
?>

<form action="#" method="post"> 
  <input type="text" name="one_value" value="Insert a number value here" />
  <input type="text" name="calculated_value" value="<?php echo $calculated_value; ?>" />
  <input type="submit" value="CALCULATE" />
</form>

Я не проверял это, но если вы вставите числовое значение в первое поле и нажмете «отправить», то в вычисляемом поле вы увидите значение, умноженное на 100 впоследствии.

...