Is it possible to combine javascript/jquery and mysql/php

Question

I have a odd question i cannot find the answer to, which probably means it is impossible. The reason i ask is i am creating a food delivery website. In the admin panel of my website administers are able to input restaurant details and menus. Part of the details is how much a customer must spend before they can checkout for delivery. so i want to be able to deactivate the checkout button, but when they met the minimum order fee the button activates.

This is my first time attempting anything like this, i have looked all over and i can only find posts or tutorials on how to deactivate then activate a button when a certain event takes place using javascript or jQuery and i know i would have to get the minimum order fee from the DB. The only logical answer is to combine them.

I am trying to achieve something similar to this...

Shopping

I followed a tutorial to do this, it is a mini fixed shopping cart, which is on the same page as the shopping cart. It redirects to shopping_cart.php from product_page.php. Most aspects on product_page.php is dynamically made.

            mysqli_stmt_execute($runn_query);
            while ($get_row = mysqli_fetch_array($runn_query)) {
            echo "<div id='prods_ere'>";
                $item_sub = $get_row['Product_Price'] * $value;
                echo $value . ' x ' .$get_row['Product_Name']. ' @ &pound;' . $get_row['Product_Price'] . '<a id="minus" class="buttons" href="Shopping_cart.php?remove=' . $Product_Id . '">-</a>  <a id="plus" class="buttons" href="Shopping_cart.php?add_item=' . $Product_Id . '"> + </a>  <a id="del" class="buttons" href="Shopping_cart.php?delete=' . $Product_Id . '">&#10006;</a> </br><p id="sub">&pound;' . $item_sub . '</p>';
                echo "<br>";
                echo "<br>";
                echo "<hr id='shopp_dashed'>";
                echo "</div>";
            }
        }
        //creating subtotal
        $sub_total += $item_sub;
        $num_items += $value;
        $total += $sub_total;
    }
}

//subtotal and empty cart message
if ($sub_total == 0) {
    echo "Ouch.. its empty in here";
} else {
    echo "<div id='grey'>";
    echo"Subtotal (excl delivery)";
    echo "<br/>";
    echo "<div id='sub_t'>";
    echo '&pound;' . number_format($sub_total, 2);
    echo "</div>";
    echo "<br/>";
    echo"Items";
    echo "<br/>";
    echo "$num_items";
    echo "<br/>";
    echo "</div>";


    echo "<div id='total'>";
    echo"Total: &nbsp;";
    echo "$total";
    echo "</div>";

    }

Products page

        <div id="prods_here">
            <!-- PLACE PRODUCTS HERE-->
        <?php cart(); ?>  
        </div>

***"I have a odd question i cannot find the answer to, which probably means it is impossible"*** You're very confident... — Pedro Lobito, May 08 '16 at 23:53
create a field on the `DB` to store the minimum value for every restaurant, then use `jQuery` to check (via `php`) if the cart value is `<` to the value on the `DB` for that restaurant, if so, deactivate the button with `jQuery`. — Pedro Lobito, May 09 '16 at 00:02
If I understand right, this can be resolved by two ways. 1st - pure js/jquery, just include prices of each product (may be save prices of selected products in the session/cookies/lso/etc), analyze customers selection and switch on/off submit-button. 2nd - use ajax, request actual product price from the server, analyze and switch on/off submit-button. Your choice can depends from how frequent prices changes, app-architecture, etc... — Wizard, May 09 '16 at 00:03
@PedroLobito that was my exact logic, but wasn't aware if it was possible — jerneva, May 09 '16 at 00:11
This question could be improved. The issue or problem should be clearly stated and the smallest amount of code possible should be posted. You're on the limits of what is on topic for stack overflow. http://stackoverflow.com/help/how-to-ask — Mick, May 09 '16 at 01:34

score 1 · Answer 1 · answered May 08 '16 at 23:57

1

Well, I'm not sure how you're keeping track of the customer's order but let's say you're keep track of it in a counter, say, totalOrderAmt. As they are making changes to the order, keep this updated and add a condition to the page, that when the totalOrderAmt >= checkOutAmt, enable the checkOut button.

I can add more details if you post some code, may be.

answered May 08 '16 at 23:57

rhcw

69
5

Okay that makes some sense, but still a little confused. I will add some code right now – jerneva May 09 '16 at 00:00
1

I'm just going to combine your code with what @ManBearPixel posted above. If $RestaurantMinimumOrder represents what the minimum order that qualifies for checkout and $total (from your code) represents the total customers order, the condition for triggering the button (using jQuery may be) is that $total > $RestaurantMinimumOrder. You keep updating $total and evaluating the above condition on each update to the page. – rhcw May 09 '16 at 00:23
okay that makes sense. now i know it is possible. I can go and research and try and receive this. Thank you for your help it is much appreciated – jerneva May 09 '16 at 00:30

score 1 · Answer 2 · answered May 09 '16 at 00:18

If you're using PHP you could load a JavaScript object on each restaurant page that basically makes a minimum_order_price variable available on the DOM for the JavaScript to handle the rest:

<html>
<head>
  ...
</head>
<body>
  <h1>Restaurant X</h1>
  <p>Minimum order: <span id="_restaurantMinimumOrder"></span></p>
  <input id="submit" type="submit" class="disabled" value="Checkout" disabled>

  <script type="text/javascript">
  <?php
    echo "window.RestaurantDetails = {}";
    echo "window.RestaurantDetails.minimum = $RestaurantMinimumOrder";
  ?>
  </script>
</body>
</html>

In this instance, $RestaurantMinimumOrder is something you configure and setup on PHP (I am not sure what you're setup is so I went with a variable name). From there, when the page is parsed from the server, the PHP will echo out that JavaScript. Once the page loads, window.RestaurantDetails will be available for the rest of your JavaScript to use. I've also included an example implementation:

<script type="text/javascript">
  // set price on the DOM
  var priceEl = document.getElementById('_restaurantMinimumOrder');
  priceEl.textContent = window.RestaurantDetails.minimum;

  // ensure submit button is disabled initially
  var submitEl = document.getElementById('submit');
  submitEl.disabled = true;
</script>

From here, if you're using jQuery you can easily adjust the state of the submit button based on whatever logic flow you have setup. Let me know if you have more questions. Best of luck! Cheers ~

You can also tie in `$.ajax` to retrieve the restaurant information, but if you want to have that information available on page load rather than wait for a request (which could be fast or slow but is not necessarily controllable) then you can make that available on the DOM by printing it to the page. — Pixxl, May 09 '16 at 00:21
Oh wow amazing. I am ready up on ajax right now as i have never used it before. Thank you so much. i will follow this and hopefully resolve my issue — jerneva, May 09 '16 at 00:36
Well let me know if you need more help, but never look at a problem as a barrier! See it as an opportunity to grow — Pixxl, May 09 '16 at 00:39
i am no expert, far from it. but looking at your suggestion wouldn't i need to say for example <$RestaurantMinimumOrder... then submitEl.disabled=true; — jerneva, May 09 '16 at 03:05
It depends on how you have it setup. If the flow is: **Customer** adds item to cart causing a form to be submitted and page reloaded, then yes. You will need to add PHP code to set the state of the checkout button per page load. IF however, the flow is: **Customer** adds item to cart and JavaScript sends an AJAX POST/GET with whatever data, then you should have the state of the submit be handled by JavaScript — Pixxl, May 09 '16 at 04:32

Is it possible to combine javascript/jquery and mysql/php

2 Answers2