具有更多变量的单位计算器答案

【问题标题】：Unit calculator with more variables具有更多变量的单位计算器
【发布时间】：2019-05-01 04:18:45
【问题描述】：

我正在尝试使用 php 制作单位转换计算器，基本上，它会根据主选择菜单更改 2 个选择菜单的值，我可以使用 javascript 来完成，但我似乎无法换行我的头脑围绕如何在 php 中解决这个问题。即使我们使用相同的单位，在主选择菜单中也会根据您选择的材料加载不同的值。如果有人可以指导我正确的方向或分享一些示例代码，我将不胜感激。

我想要达到的目标https://alkoutprojects.com/customer-support/conversion-calculator/ 格式如下。

        <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

【问题讨论】：

如果我理解正确的话，我建议您查看 AJAX。基本上将您的表单数据发送到单独的 php 中进行计算并返回答案。
如果已经涉及到 JS，使用 PHP 会增加不必要的复杂性。为什么不用 JS 在客户端做所有的计算？

标签： javascript php calculator

【解决方案1】：

请记住，PHP 是服务器渲染的，所以如果你在 PHP 中执行它，那么它会是这样的：

用户在字段中插入值
然后按“提交”
然后将输入的值发送到服务器（执行 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。

【讨论】：

【解决方案2】：

您可以为“主”下拉菜单添加 on change 事件，并在更改后为下拉菜单生成其他值。

示例：

$( "#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 对您的问题的评论进行操作。

我希望我说得有道理并且对您有所帮助。祝你好运！

已编辑：

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.
             }
                },
            });
        })

后端：

在后端抓取这样的值：

$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);

【讨论】：

嗨，唐，在我分享的代码中，我可以根据您选择的材料正确地将值加载到其他 2 个选择 meus，但我的问题是例如 32%NaoH M3，MT vales 与 50 不同%NaoH M3, MT 值，所以我需要检查 4 个参数并进行计算 1-选择的材料，2-从 UDM，3-到 Udm 和 4-值然后结果将取决于所有这 4，这就是为什么我需要php，你知道只有使用jquery的其他方法吗？
嗨 Roshan，最好的选择是使用 ajax 请求。将每个选择的值提交到您的服务器端页面以及那里的计算/检查。将答案/值返回给前端。我将编辑我的答案，以向您展示我试图解释的示例。

【解决方案3】：

我采用了另一种方法并得到了我需要的结果，非常感谢您的时间和精力，这确实有助于我缩小范围。我的最终代码如下。

<?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>

【讨论】：