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">×</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">×</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
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);
?>
Related
I want to make an approve and reject button in foreach loop.
Approve button use only item's ID. So I have no problem.
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
But in reject button, I have to take explanation from text area to send web service.
So I added a bootstrap modal;
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Rejet</button>
And this is my modal ;
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation .. </label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
I have to get value from explanation text area and add to url action in modal.
How can I get textarea value in url action ?
My view form is here ;
<form method="post">
<section class="section">
<div class="row">
<div class="col-lg-12">
#foreach (var item in Model)
{
<div class="card">
<div class="card-body">
<h5 class="card-title">#item.NameSurname - #item.Section</h5>
<h6 class="card-subtitle mb-2 text-muted">#item.StartDate / #item.EndDate</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Days gün #item.Hours saat</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Type #item.PriceState</h6>
<h6 class="card-subtitle mb-2 text-muted">#item.Expression</h6>
<p class="card-text">#item.CompExplain</p>
<button type="button" class="btn btn-success" onclick="location.href='#Url.Action("Approve", "Home", new {page = "leave/st/approve/", id = #item.ID, actionName ="LeaveRequests"})'">Approve</button>
<button type="button" id="btnReject" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop-#item.ID">Reject</button>
</div>
</div>
<!-- Modal --><div class="modal fade" id="staticBackdrop-#item.ID" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Red İşlemi</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">
<label for="input" class="col-sm-12 col-form-label">Explanation..</label>
<div class="col-sm-12">
#*I want to get this explanation*#
<textarea id="explanation" class="form-control" style="height: 100px"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">İptal</button>
#*THIS URL ACTION*#
<a class="btn btn-success" href="#Url.Action("Reject", "Home", new {page="leave/st/reject/",id=#item.ID,
actionName = "LeaveRequests", exp= ? })" id="lnk">OK</a>
</div>
</div>
</div>
</div>
}
</div>
</div>
</section>
</form>
First, you should post your question with "actual" code. if you are using jQuery you can use JS to pull the value from the textarea or any input by using its id:
<script>
$('#btnReject').click(function() {
$.ajax({
url: #Url.Action("Reject", "Home", {page="leave/st/reject/", id=#item.ID, actionName = "LeaveRequests"}) + '?exp=' + $("#explanation").val()
type: 'POST',
// ... other ajax options ...
});
});
</script>
otherwise you can use form element and use "submit" buttons to submit values to form action. You may have to adapt this code to your project.
<form method="get" action="#Url.Action("MyAction", "MyController")" >
#Html.Textbox("toPay")
<input type="submit" value="Pay"/>
</form>
I would suggest using JS to pull this off.
I want to edit/ update data that show in my page. The edit/ update data should done in modal. Below is code that I tried and it didn't work.
I tried lots of methods to done this. But not succeeded. IF anyone can help on this it would be very grateful. Thank you.
<?php
$query1=mysqli_query($dbconn, "SELECT * FROM food_menu WHERE status='1' AND category='Breakfast'" );
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="card-deck">
<div class="card border-dark">
<div class="card-body">
<h3 class="card-title"><b>Breakfast Menu</b></h3>
<?php
while ($row1=mysqli_fetch_array($query1)){
$id=$row1['id'];
$name=$row1['name'];
$details=$row1['details'];
$category=$row1['category'];
$price=$row1['price'];
$image=$row1['image'];
?>
<div class="row">
<div class="col">
<div class="zoom">
<img src="<?php echo $image; ?>" class="rounded float-left img-thumbnail" alt="Food Image">
</div>
</div>
<div class="col">
<div hidden><?php echo $id; ?></div>
<h5><?php echo $name; ?></h5>
<h7><?php echo $details; ?></h7><br>
<h7><b>Rs. <?php echo $price; ?></b></h7><br>
<div class="text-right"><button type="button" class="btn btn-primary btn-sm editbtn" name="edit" id="edit" data-id="<?php echo $id; ?>" data-toggle="modal"><span class="icon text-white-100">
<i class="fas fa-pencil-alt"></i>
</span>UPDATE</button>
</div>
</div>
</div>
<br>
<?php } ?>
<button type="button" class="btn btn-success" name="add" id="add">Add New</button>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->
My Modal is below
<div class="modal fade" id="editmodal" name="editmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<input type="text" name="fid" name="fid" >
<input type="text" name="food_name" id="food_name">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
JavaScript Used.
<script>
$(document).ready(function(){
$('.editbtn').on('click', function(){
$('#editmodal').modal('show');
var ids = $(this).attr('data-id');
$(".modal-body #fid").val( ids );
$(".modal-body #food_name").val( ids );
});
});
</script>
When I click update button the modal is shown but data is not showing the modal.
My code is working but the modal is showing same information for every button. I have to refresh the page each time to get information for other button .
there's the script and modal code
the id here is of the product fetched from database. i am new to web development still pursuing my degree.
<script>
function detailsmodal(id)
{
var data = {"id":id};
jQuery.ajax({
url : <?=BASEURL;?>+'/includes/detailmodal.php',
method : "POST",
data : data,
success : function(data)
{
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error :function()
{alert("something went wrong");}
});
}
</script>
<?php ob_start(); ?>
<div class="container">
<div class="modal fade" id="details-modal" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center"><?= $product['title'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="<?= $product['image'];?>" alt="<?= $product['title'];?>" class="details img-responsive"/>
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?= $product['description'];?></p><hr>
<p>Price:₹ <?= $product['price'];?> </p>
<p>Brand: <?= $brand['brand'];?></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-warning" type="sumbit" class="glyphicon glyphicon-shopping-cart">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
I have a problem. I want my data dynamically view in modal. When I click first modal button its open dynamically and show data then when I click second button its show same previews data which opens first time. After reload the page when I click second its open dynamically again when I click first button its show second modal data.
Its WordPress site.
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal">Book IT</a>
<div class="modal booking-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
Jquery Modal data destroy code:
jQuery('body').on('hidden.bs.modal', '.modal', function () {
jQuery(this).removeData('bs.modal');
});
because you are repeating part of the dialog only not all dialog
try this
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal<?=$row->id?>">Book IT</a>
<div class="modal booking-modal fade" id="myModal<?=$row->id?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
The form is available when the user clicks a modal. When I click the submit button in the modal, it button does not work.
foreach ($posts as $post) { echo '
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
</tr>
</tbody>
';
}
Here is the modal:
echo '
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">'; echo '
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype=\ "multipart/form-data\">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>' ;
You need to check if the submit button has been passed then run the code. This will ensure that you won't get an undefined index error.
if (isset($_POST['submit'])) {
// Your code here.
}
Also use form (<form></form>) tags to specify POST request in method="post".
Errors
Wrong placement of <form> open and close
Miss-Match Character in enctype=\ "multipart/form-data\", (\).
So Final Well-Form Code is
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
**
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">**
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Note: You are not uploading any Files in your form. So No use of enctype
Don't use echo with single quote: that's what's making your headache. Create code like this:
<div id="<?php echo $id_user ?>" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/<?php echo $id_user ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
and this other code:
<?php
foreach ($posts as $post): ?>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
<?php endforeach; ?>
Also read What is the difference between single-quoted and double-quoted strings in PHP?