javascript shopping cart email checkout

Question

Thank you for any assistance. I have just started learning HTML/JAVASCRIPT/CSS.

I have a small assignment/project to complete. requires a front store with a few items (3 or 4). must create a javascript shopping cart. when buy button is clicked item is added to cart. then cart can be viewed. there must be a checkout option, however there is no payment processing . the order needs to be emailed to myself and the user for manual payment.

how can i get the items in the cart to be emailed?

Thank you for any assistance

The Javascript is credited to Burlaka Dmytro

here is the link , this is the what i am using to work with. https://codepen.io/Dimasion/pen/oBoqBM

<!-- Nav -->
<nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
 <div class="row">
     <div class="col">
       <button type="button" class="btn btn-primary" data-toggle="modal" 
        data-target="#cart">Cart (<span class="total-count"></span>) 
       </button><button class="clear-cart btn btn-danger">Clear 
                Cart</button></div>
     </div>
</nav>


<!-- Main -->
<div class="container">
 <div class="row">
  <div class="col">
    <div class="card" style="width: 20rem;">
      <img class="card-img-top" 
      src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card 
      image cap">
      <div class="card-block">
      <h4 class="card-title">Orange</h4>
      <p class="card-text">Price: $0.5</p>
      <a href="#" data-name="Orange" data-price="0.5" class="add-to-cart 
      btn btn-primary">Add to cart</a>
    </div>
  </div>
  </div>
  <div class="col">
    <div class="card" style="width: 20rem;">
    <img class="card-img-top" src="http://images.all-free- 
    download.com/images/graphicthumb/vector_illustration_of_ripe_
    bananas_567893.jpg" alt="Card image cap">
   <div class="card-block">
    <h4 class="card-title">Banana</h4>
     <p class="card-text">Price: $1.22</p>
     <a href="#" data-name="Banana" data-price="1.22" class="add-to-cart 
     btn btn-primary">Add to cart</a>
   </div>
 </div>
  </div>
  <div class="col">
    <div class="card" style="width: 20rem;">
  <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY- 
   9839190/organic-lemon-250x250.jpg" alt="Card image cap">
  <div class="card-block">
  <h4 class="card-title">Lemon</h4>
  <p class="card-text">Price: $5</p>
  <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn 
 btn-primary">Add to cart</a>
 </div>
 </div>
  </div>
  </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria- 
   labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
    <button type="button" class="close" data-dismiss="modal" aria- 
   label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <table class="show-cart table">

    </table>
    <div>Total price: $<span class="total-cart"></span></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Order now</button>
  </div>
  </div>
 </div>
 </div> 

i cannot get the cart contents to be emailed.

***********************************************
This is my PHP
*********************************************
<?php
    $to      = 'my email address is here';
    $subject = 'SolarPlexus Website';
    $txt = $_POST['content'];

    $headers = 'From: admin@solarplexus.co.za' . "\r\n" .
               'Reply-To: info@solarplexus.co.za' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
    mail($to, $subject, $txt,  $headers);
    Header('Location: thankyou.html');
?>


*******************************
This is html part for the cart, the cart is hidden until cart button is 
clicked. making use of bootstrap modal.
*******************************

 <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
       <button type="button" class="close" data-dismiss="modal" aria- 
        label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
    </div>
     <form name="contactform" method="post" action="sendjs.php">    
     <div class="modal-body">

     <input type="text" required="required" placeholder="Enter Name" 
     name="name1"> 
     <input type="email" required="required" placeholder="Enter Email 
     address" name="email1">
     <input type="tel" required="required" placeholder="Enter Telephone 
     number" name="tel1">


     <table id="cartents" class="show-cart table">

     </table>
    <div>Total price: R<span class="total-cart"></span></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- 
    dismiss="modal">Close</button>
        <button onClick="SendMail()" type="button submit" class="btn btn- 
     primary">Order now</button>

    </div>
  </div>
  </div>
 </div>
</form> 


*************
 the Javascript file remains unchanged from the codepen link provided

Answer 1

You will need to add an id to your table content: HTML

<div>Total price: $<span class="total-cart" id="cartContent"></span></div>

create a function for the button:

<button onclick="SendMail()"type="button" class="btn btn-primary">Order now</button>

then create the function SendMail(); in a script

<script>
 function SendMail()    
     {    
       var tableContent = document.getElementById("cartContent").innerHTML;    
       $.post('mail.php',{content:tablecontent},function(data) {
    });
     }
</script>

You will need to create a mail.php file

<?php
$to = "somebody@example.com";
$subject = "ur subject";
$txt = $_POST['content'];
$headers = "From: webmaster@example.com" . "\r\n" .
"CC: somebodyelse@example.com";

mail($to,$subject,$txt,$headers);
?>