HEX
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.30
System: Linux iZj6c1151k3ad370bosnmsZ 3.10.0-1160.76.1.el7.x86_64 #1 SMP Wed Aug 10 16:21:17 UTC 2022 x86_64
User: root (0)
PHP: 7.4.30
Disabled: NONE
Upload Files
File: /var/www/html/www.winghung.com/demo_v1/result.php
<?php
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    require_once('../wp-load.php'); 
    session_start();
    date_default_timezone_set("Asia/Hong_Kong"); 
    global $wpdb, $sitepress;
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .container {
            margin-top:20px;
        }
        .card {
            background-color: rgba(0, 0, 0, 0.01);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #0067b1;
            color: #ffffff;
        }     
    </style>
    <title>Demo</title>

  </head>
  <body>
    <div class="container">
        <h1>Product Price Lookup</h1>

        <div class="row" style='margin-top:20px;'>
            <!--<div class="card" style="width: 100%;">   
                <div class="card-body">-->
                    <form id='price_lookup_table' name='price_lookup_table' method='post'>
                        <div class="mb-3 row">
                            <label for="quantity" class="col-sm-2 col-form-label">Qty. <small>(min.:100 roundup:100)</small></label>
                            <div class="col-sm-2">
                                <input type="number" class="form-control" id="quantity" value="100" min="100" max="100000" step="100">  
                            </div>

                            <label for="paper" class="col-sm-2 col-form-label">Paper Material</label>
                            <div class="col-sm-2">
                                <select id='paper' name='paper' class="form-select" aria-label="Select paper material">
                                    <option></option>
                                    <?php
                                        $result = $wpdb->get_results("SELECT * FROM `custom_material_paper` WHERE status = '1'");
                                        foreach($result as $paper){
                                            echo "<option value='".$paper->id."'>".$paper->name." (".$paper->length_cm."cm x ".$paper->width_cm."cm)</option>";
                                        }
                                    ?>
                                </select>
                            </div>    
                            <label for="paper" class="col-sm-2 col-form-label">Printing Colour</label>
                            <div class="col-sm-2">
                                <select id='color' name='color' class="form-select" aria-label="Select printing color">
                                    <option></option>
                                    <?php
                                        $result = $wpdb->get_results("SELECT * FROM `custom_printing_color` WHERE status = '1'");
                                        foreach($result as $color){
                                            echo "<option value='".$color->id."'>".$color->name."</option>";
                                        }
                                    ?>
                                </select>
                            </div>                                            
                        </div>
                    </form>
                <!--</div>
            </div>-->
        </div>
        <hr>
        <div class="row">
            <?php
                $productResult = $wpdb->get_results("SELECT * FROM `custom_quotation_product` WHERE status = '1'");
                foreach($productResult as $productObj) {
            ?>
            <div class="col-md-4 col-sm-12 col-xs-12">
                <div class="card" style="width: 100%;">
                    <div class="card-header text-center"><h4 class="card-title"><?php echo $productObj->name;?></h5></div>
                    <div class="card-body">                        
                        <h6 class="card-subtitle mb-2 text-muted">Product Size (cm): <?php echo $productObj->length_cm;?>(L) x <?php echo $productObj->width_cm;?>(W) x <?php echo $productObj->height_cm;?>(H)</h6>
                        <h6 class="card-subtitle mb-2 text-muted">Folded Size (cm): <?php echo $productObj->folded_length_cm;?>(L) x <?php echo $productObj->folded_width_cm;?>(W)</h6>
                        <iframe src="<?php echo $productObj->path;?>?hash=<?php echo $_GET['hash'];?>" title="<?php echo $productObj->name;?>" width='100%' height='400'></iframe>                        
                        <div class='price_area text-center' id='price_<?php echo $productObj->id;?>'></div>
                        <!--<h3 style="display:flex"><div class='price_area' id='price_<?php echo $productObj->id;?>'>Enter Qty, select paper material and printing color</div></h7>-->
                    </div>
                </div>
            </div>
            <?php } ?>
        </div>

        <div class="row" style='margin:20px 0px;'>
            <div class="col-md-4 col-sm-12 col-xs-12">
                <button type="button" class="btn btn-outline-dark" onclick="window.location.href='index.php'">Back</button>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script>
        function calculate_price(){
            if($("#quantity").val().length<=0){
                $(".price_area").html('<small>Enter a valid Qty, select paper material and printing color</small>');
            } else if ($("#quantity").val() < 100){
                $(".price_area").html('<small>Enter a valid Qty, select paper material and printing color</small>');
            } else if ($("#paper").val().length<=0){
                $(".price_area").html('<small>Enter a valid Qty, select paper material and printing color</small>');
            } else if ($("#color").val().length<=0){
                $(".price_area").html('<small>Enter a valid Qty, select paper material and printing color</small>');
            } else {

                var dataString = "section=calculate_price&qty="+$("#quantity").val()+"&paper="+$("#paper").val()+"&color="+$("#color").val();                
                $.ajax({
                    type: "POST",
                    url: "ajax_data.php",
                    data: dataString,
                    cache: false,
                    success: function(data){                        
                        var json = JSON.parse(data);
                        if(json.condition=='success'){                            
                            $.each(json.content, function(i, item) {
                               // $("#"+json.content[i].selector_id).html("<h1>HKD "+json.content[i].price+"</h1>");
                               $("#"+json.content[i].selector_id).html("<div class='d-grid gap-2'><button type='button' class='btn btn-lg btn-dark'>HKD "+json.content[i].price+"</button></div>");
                               

                            });                            
                        } else {
                            alert("error");
                        }
                    },
                    beforeSend: function() {
                        $(".price_area").html('Calculating...');
                    },
                });	
            }
        }

        $("#quantity,#paper,#color").change(function(){
            calculate_price();
        });

        $("#quantity").keyup(function(){
            calculate_price();
        });

        $("#quantity").on('keypress',function(e) {
            if(e.which == 13) {
                calculate_price();
                e.preventDefault();
            }
        });   

    </script>
  </body>
</html>