Checking out products from the cart is not processed and saved to the billing address table

Hi Team

I have a checkout page and want to process an order of the product, but its not being processed and need some help. It supposed to processed them so it could later saved these orders to the table.

// checkout page

<?php
session_start();

require 'dbconn.php';
require_once 'generate_tracking_number.php';

$grand_total = 0;
$allItems = '';
$items = [];

$sql = "SELECT CONCAT(product_name, '(',qty,')') AS ItemQty, total_price FROM cart";
$stmt = $conn->prepare($sql);
$stmt->execute();

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $grand_total += $row['total_price'];
    $items[] = $row['ItemQty'];
}

$allItems = implode(', ', $items);

// Check if the email parameter is set
if (isset($_POST['email'])) {
    // Send confirmation email
    $email = $_POST['email'];

    require_once(__DIR__ . '/sendEmails/vendor/autoload.php');
    $mail = new PHPMailer\PHPMailer\PHPMailer();
    $mail->isSMTP();
    $mail->Host = 'smtp.outlook.com'; // Replace with your SMTP server address
    $mail->Port = 587; // Replace with your SMTP server port
    $mail->SMTPAuth = true;
    $mail->Username = 'gcizmandelegant@outlook.com'; // Replace with your SMTP username
    $mail->Password = '861026@Metro'; // Replace with your SMTP password
    $mail->setFrom('gcizmandelegant@outlook.com', 'Your Name'); // Replace with your own email address and sender name
    $mail->addAddress($email);
    $mail->Subject = 'Order Confirmation';

    // Generate the tracking number
    $trackingNumber = generateTrackingNumber();

    // Send the email with the tracking number
    $mail->Body = "Thank you for your order!\n\n";
    $mail->Body .= "Your tracking number: $trackingNumber\n";
    $mail->Body .= "Total amount payable: " . number_format($grand_total, 2) . "/-\n";
    $mail->Body .= "Products: $allItems\n\n";
    $mail->Body .= "We will process your order soon. If you have any questions, please contact our customer support.";

    if ($mail->send()) {
        echo 'Email sent successfully.';
    } else {
        echo 'Error sending email: ' . $mail->ErrorInfo;
    }
} else {
    echo 'Email parameter not set.';
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="Sahil Kumar">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Checkout</title>
  	<!----Boostrap cdn libraries---->
	<!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/register-messages.css" rel="stylesheet">
	<link href="css/div-card-form.css" rel="stylesheet">
  
  

</head>

<body>
  <nav class="navbar navbar-expand-md bg-green navbar-green">
    <!-- Brand -->
    <a class="navbar-brand" href="index.php"><i class="fas fa-mobile-alt"></i>&nbsp;&nbsp;E Shooper</a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="index.php"><i class="fas fa-mobile-alt mr-2"></i>Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-th-list mr-2"></i>Categories</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="checkout.php"><i class="fas fa-money-check-alt mr-2"></i>Checkout</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="cart.php"><i class="fas fa-shopping-cart"></i> <span id="cart-item" class="badge badge-danger"></span></a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 px-4 pb-4" id="order">
        <h4 class="text-center text-info p-2">Complete your order!</h4>
        <div class="jumbotron p-3 mb-2 text-center">
          <h6 class="lead"><b>Product(s) : </b><?= $allItems; ?></h6>
          <h6 class="lead"><b>Delivery Charge : </b>Free</h6>
          <h6 class="lead"><b>Tracking Number:</b><?= $trackingNumber; ?></h6>
          <h5><b>Total Amount Payable : </b><?= number_format($grand_total,2) ?>/-</h5>
        </div>
        <form id="placeOrder"  action="action.php" method="post">
          <input type="hidden" name="products" value="<?= $allItems; ?>">
          <input type="hidden" name="grand_total" value="<?= $grand_total; ?>">
          <div class="form-group">
            <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name" required>
          </div>
          <div class="form-group">
            <input type="email" id="email" name="email" class="form-control" placeholder="Enter E-Mail" required>
          </div>
          <div class="form-group">
            <input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter Phone" required>
          </div>
          <div class="form-group">
            <textarea id="address" name="address" class="form-control" rows="3" cols="10" placeholder="Enter Delivery Address Here..."></textarea>
          </div>
          <h6 class="text-center lead">Select Payment Mode</h6>
          <div class="form-group" id="paymentForm">
            <select name="pmode" class="form-control" id="paymentMode">
              <option value="" selected disabled>-Select Payment Mode-</option>
              <option value="cards">Debit/Credit Card</option>
			  <option value="snapscan">Snap Scan</option>
            </select>
          </div>
		  
		  <!---snapscan starts here--->
		  
		<div id="paymentOptions">
		<div id="cardPayment" style="display: none;">
    </div>

    <div id="snapScanPayment" style="display: none;">
        <!-- Snap Scan Payment Form -->
        <div id="qrCodeContainer"></div>
    </div>
	</div>
		  <!---snapscan ends here---->
		 
			<!---Debit card information details form----->
				<div class="container">
    <div class="card">
        <div class="creditCardForm" style="display:none;">
            <div class="heading">
                <h1>Confirm Purchase</h1>
            </div>
            <div class="payment">
                <form>
                    <div class="form-group owner">
                        <label for="owner">Owner</label>
                        <input type="text" class="form-control" id="owner">
                    </div>
                    <div class="form-group CVV">
                        <label for="cvv">CVV</label>
                        <input type="text" class="form-control" id="cvv">
                    </div>
                    <div class="form-group" id="card-number-field">
                        <label for="cardNumber">Card Number</label>
                        <input type="text" class="form-control" id="cardNumber">
                    </div>
                    <div class="form-group" id="expiration-date">
                        <label>Expiration Date</label>
                        <select>
                            <option value="01">January</option>
                            <option value="02">February</option>
                            <option value="03">March</option>
                            <option value="04">April</option>
                            <option value="05">May</option>
                            <option value="06">June</option>
                            <option value="07">July</option>
                            <option value="08">August</option>
                            <option value="09">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                        <select>
                            <option value="16"> 2016</option>
                            <option value="17"> 2017</option>
                            <option value="18"> 2018</option>
                            <option value="19"> 2019</option>
                            <option value="20"> 2020</option>
                            <option value="21"> 2021</option>
                            <option value="22">2022</option>
                            <option value="23">2023</option>
                            <option value="24">2024</option>
                            <optionn value="25">2025</optionn>
                            <option value="26">2026</option>
                            <option value="27">2027</option>
                            <option value="28">2028</option>
                            <option value="29">2029</option>
                            <option value="30">2030</option>
                        </select>
                    </div>
                    <div class="form-group" id="credit_cards">
                        <img src="img/visa.jpg" id="visa">
                        <img src="img/mastercard.jpg" id="mastercard">
                        <img src="img/amex.jpg" id="amex">
                    </div>
                    <div class="form-group" id="pay-now">
                        <button type="submit" class="btn btn-primary" id="confirm-purchase">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-----Debit card information ends here-------->
          <div class="form-group">
            <input type="submit" name="submit" value="Place Order" class="btn btn-danger btn-block" id="placeOrder">
          </div>
        </form>
      </div>
    </div>
  </div>

	
  
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="js/placeOrder.js"></script>
<script src="js/jquery.payform.min.js"></script>
<script src="js/script.js"></script>
<script src="js/snap-scan.js"></script>
  <!----Form validation for placing orders------->
    <script type="text/javascript">
  $(document).ready(function() {
    $('#placeOrder').validate({
      rules: {
        name: {
          required: true
        },
        email: {
          required: true,
          email: true
        },
        phone: {
          required: true
        },
        address: {
          required: true
        }
      },
      messages: {
        name: {
          required: 'Please enter your valid name'
        },
        email: {
          required: 'Please enter your email address',
          email: 'Please enter a valid email address'
        },
        phone: {
          required: 'Please enter a valid phone number'
        },
        address: {
          required: 'Please enter your delivery address'
        }
      },
      errorElement: 'div',
      errorPlacement: function(error, element) {
        error.addClass('alert alert-danger');
        error.insertAfter(element);
      },
      success: function(label) {
        label.removeClass('alert-danger');
      }
    });
  });
  
  
  </script>




<script type="text/javascript">
  $(document).ready(function() {

    // Sending Form data to the server
    $("#placeOrder").submit(function(e) {
      e.preventDefault();
      $.ajax({
        url: 'action.php',
        method: 'post',
        data: $('form').serialize() + "&action=order",
        success: function(response) {
          $("#order").html(response);
        }
      });
    });

    // Load total no.of items added in the cart and display in the navbar
    load_cart_item_number();

    function load_cart_item_number() {
      $.ajax({
        url: 'action.php',
        method: 'get',
        data: {
          cartItem: "cart_item"
        },
        success: function(response) {
          $("#cart-item").html(response);
        }
      });
    }
  });
  </script>
  
  <!----Credit card information--->
  
  <script type="text/javascript">
	$(document).ready(function() {
  $('#paymentMode').change(function() {
    var selectedOption = $(this).val();
    
    if (selectedOption === 'cards') {
      $('.creditCardForm').show();
    } else {
      $('.creditCardForm').hide();
    }
  });
});

  </script>
  

  
</body>

</html>

// action php page(saving orders etc)

<?php
	session_start();
	require 'dbconn.php';

	// Add products into the cart table
	if (isset($_POST['pid'])) {
	  $pid = $_POST['pid'];
	  $pname = $_POST['pname'];
	  $pprice = $_POST['pprice'];
	  $pimage = $_POST['pimage'];
	  $pcode = $_POST['pcode'];
	  $pqty = $_POST['pqty'];
	  $total_price = $pprice * $pqty;

		$stmt = $conn->prepare('SELECT product_code FROM cart WHERE product_code=:pcode');
		$stmt->bindParam(':pcode', $pcode);
		$stmt->execute();
		$res = $stmt->fetch(PDO::FETCH_ASSOC);
		$code = $res['product_code'] ?? '';


	  if (!$code) {
	    $query = $conn->prepare('INSERT INTO cart (product_name, product_price, product_image, qty, total_price, product_code) VALUES (:pname, :pprice, :pimage, :pqty, :total_price, :pcode)');
		$query->execute([
		'pname' => $pname,
		'pprice' => $pprice,
		'pimage' => $pimage,
		'pqty' => $pqty,
		'total_price' => $total_price,
		'pcode' => $pcode
		]);
	    $query->execute();

	    echo '<div class="alert alert-success alert-dismissible mt-2">
						  <button type="button" class="close" data-dismiss="alert">&times;</button>
						  <strong>Item added to your cart!</strong>
						</div>';
	  } else {
	    echo '<div class="alert alert-danger alert-dismissible mt-2">
						  <button type="button" class="close" data-dismiss="alert">&times;</button>
						  <strong>Item already added to your cart!</strong>
						</div>';
	  }
	}

	// Get no.of items available in the cart table
	if (isset($_GET['cartItem']) && isset($_GET['cartItem']) == 'cart_item') {
		 $stmt = $conn->prepare('SELECT COUNT(*) as count FROM cart');
		$stmt->execute();
		$result = $stmt->fetch(PDO::FETCH_ASSOC);
		$rows = $result['count'];

    echo $rows;
	}

	// Remove single items from cart
	if (isset($_GET['remove'])) {
	  $id = $_GET['remove'];

		$stmt = $conn->prepare('DELETE FROM cart WHERE id = :id');
		$stmt->execute(['id' => $id]);

	if ($stmt->rowCount() > 0) {
    $_SESSION['showAlert'] = 'block';
    $_SESSION['message'] = 'Item removed from the cart!';
    header('location: cart.php');	
	} else {
    echo 'No item found in the cart with the specified ID.';
	}

	  $stmt->execute();

	  $_SESSION['showAlert'] = 'block';
	  $_SESSION['message'] = 'Item removed from the cart!';
	  header('location:cart.php');
	}

	// Remove all items at once from cart
	if (isset($_GET['clear'])) {
	  $stmt = $conn->prepare('DELETE FROM cart');
	  $stmt->execute();
	  $_SESSION['showAlert'] = 'block';
	  $_SESSION['message'] = 'All Item removed from the cart!';
	  header('location:cart.php');
	}

	// Set total price of the product in the cart table
	if (isset($_POST['qty'])) {
	  $qty = $_POST['qty'];
	  $pid = $_POST['pid'];
	  $pprice = $_POST['pprice'];

	  $tprice = $qty * $pprice;

	  $stmt = $conn->prepare('UPDATE cart SET qty=?, total_price=? WHERE id=?');
	  $stmt->bind_param('isi',$qty,$tprice,$pid);
	  $stmt->execute();
	}

	// Checkout and save customer info in the orders table
	if (isset($_POST['action']) && isset($_POST['action']) == 'order') {
		$name = $_POST['name'];
		$email = $_POST['email'];
		$phone = $_POST['phone'];
		$address = $_POST['address'];
		$pmode = $_POST['pmode'];
		$products = $_POST['products'];
		$grand_total = $_POST['grand_total'];

		$sql = "INSERT INTO orders (name, email, phone, address, payment_method, products, grand_total) VALUES (:fullname, :email, :phone, :address, :payment_method, :products, :grand_total)";
		$stmt = $conn->prepare($sql);

	$stmt->bindValue(':fullname', $name);
	$stmt->bindValue(':email', $email);
	$stmt->bindValue(':phone', $phone);
	$stmt->bindValue(':address', $address);
	$stmt->bindValue(':payment_method', $pmode);
	$stmt->bindValue(':products', $products);
	$stmt->bindValue(':grand_total', $grand_total);

	$stmt->execute();
	
	echo "Checkout information has been stored.";
	  $stmt->execute();
	  $stmt2 = $conn->prepare('DELETE FROM cart');
	  $stmt2->execute();
	  $data .= '<div class="text-center">
								<h1 class="display-4 mt-2 text-danger">Thank You!</h1>
								<h2 class="text-success">Your Order Placed Successfully!</h2>
								<h4 class="bg-danger text-light rounded p-2">Items Purchased : ' . $products . '</h4>
								<h4>Your Name : ' . $name . '</h4>
								<h4>Your E-mail : ' . $email . '</h4>
								<h4>Your Phone : ' . $phone . '</h4>
								<h4>Total Amount Paid : ' . number_format($grand_total,2) . '</h4>
								<h4>Payment Mode : ' . $pmode . '</h4>
						  </div>';
	  echo $data;
	}
?>

The most apparent problem is that nested forms are invalid. You should have one form on the checkout page. You should validate your resulting web pages at validator.w3.org

Beyond that, what debugging have you done? Is the form data being submitted to the web server? Is the correct section of server-side code being executed? Is the INSERT query producing an error?

1 Like

Here’s another problem that could prevent the code from working in the browser. Ids must be unique. You have a form tag and a submit button, both with id=“placeOrder”. Again, validating the resulting web pages will help you find problems like this.

Is there a better approach maybe use of example, reason why i have sub form its for delivery address of a user to have order summary.

The correct approach to web design is learning the meaning of the words and syntax you are using. so that you can debug code when it doesn’t work and you can write new code using the information that you have learned.

Nested forms are invalid. There is no such thing as a sub form. If you actually validate your resulting web page as I stated, when the validator finds the nested forms, it is a fatal error that prevents validating the rest of the html document. The solution to this problem is simple, write a single form that contains the fields that you want.

Repeating ids in the html document is invalid. The browser typically just uses the first instance that it finds. The solution to this problem is simple. Only give elements id attributes when they need them (the ids are actually being used by css/javascript), and use unique names for each id.

Thanks for the feedback, managed to first valid my form using the correct ID. Moving on the next step of the problem now to find out why am i unable to process orders when user inserted all the details from the form.

You still have only one cart. How do you expect multiple people to use your website at the same time?

1 Like

So while everyone else points out problems, lets actually do some troubleshooting on the problem stated while you also correct the issues people are pointing out.

Is the problem in your Javascript, or your PHP? Have you looked at the request your javascript is sending to the server to see if the data serialization worked?

It will work once you fix many markup issues which mabismad pointed out. It took a while to get things to work but it will.
Remove the extra <form> tags.
Remove the duplicate ID from your Place Order input or change it to a unique ID (as already pointed out).
Look for errors in your <option> tags with extra letters.
Comment tags should only have 2 dashes and you have many tags throwing errors.

<!----Boostrap cdn libraries---->

should be

<!-- Boostrap cdn libraries -->

The variable $trackingNumber is being echoed in the form but not defined (yet) causing an error, So I defined it as empty at the top of the page

$trackingNumber = '';

I even added alt tags to you images, e.g. <img src="img/visa.jpg" id="visa" alt="visa"> to get your page to validate.

On your processing page I commented out your extra execute line but it really should be removed.

//$stmt->execute();

During debugging and testing I also comment out //$stmt2->execute(); as there is no need to remove cart items until processing adding things to the orders table has been fixed.

On the main page I also commented out the email section as again it is not needed during testing and should probably be moved to your action.php processing section once you get thing worked out.

Remember to view page source and copy the html into an html validator so you know you are using valid markup… Errors will kill your javascript.

I also forgot to mention that I changed your action condition to

if (isset($_POST['action']) && $_POST['action'] == "order") {

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.