Question

我正在尝试使用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

Answer 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。

Answer 2

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

示例：

$( "#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);

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

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

3 个答案: