I have this in my Homepage
everytime the customer click the Add to cart it will change to this , and the data will Inserted in my database
I use AJAX to prevent the page to reload/refresh
<script type="text/javascript">
$(document).ready(function(){
$('#Insert_form').submit(function(){
event.preventDefault();
var that = $(this);
$.ajax({
url: "{% url 'batchaddtocartHomepage' %}",
type: 'POST',
data: that.serialize()
,success: function(data){
console.log('Success!');
}
});
return false;
});
});
</script>
my views.py
def batchaddtocartHomepage(request):
.....
insert = CustomerPurchaseOrderDetail(
....
)
insert.save()
data = {}
data['success'] = True
return HttpResponse(json.dumps(data), content_type="application/json")
this is my html
{% for product in bought_item %}
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="{{product.image.url}}" style="width:250px;height:250px;" alt="" />
<form method="POST" id="Insert_form" enctype="multipart/form-data">{% csrf_token %}
<span style="text-decoration: line-through;">₱ {{product.price}}</span>
<h2><span >{{product.other_discount_price_formula|floatformat:'2'|intcomma}}</span></h2>
<div style="height: 65px;"><p>{{product.product}}</p></div>
<div id="qty" style="display:none;">
<div class="quantity buttons_added" style="width: 30%;">
<input type="submit" value="-" class="minus" formaction="/updatecart_index/">
<input type="number" step="1" min="1" max="99" name="quantity" value="1" title="Qty" class="divshow input-text qty text" size="4" pattern="" inputmode="">
<input type="submit" value="+" class="plus" formaction="/updatecart_index/">
</div>
</div>
<input type="submit" value="Add to cart" id="btn" onclick="myFunction()" class="btn btn-default add-to-cart">
</form>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="{% url 'Vegetables' %}?id={{product.id}}"><i class="fa fa-plus-square"></i>View Product 1</a></li>
</ul>
</div>
</div>
</div>
{% endfor %}
my script
<script>
function myFunction() {
var x = document.getElementById("qty");
var btn = document.getElementById("btn");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
PROBLEM I encountered, the button only changes when I refresh the page.
this is my what i want to do in my own site https://www.landers.ph/ (please try to click the button of landers.ph site) i hope it will get you idea of what functionality i want.
UPDATE i remove the script and i add to some code in my ajax
<script type="text/javascript">
$(document).ready(function(){
$('#Insert_form').submit(function(){
event.preventDefault();
var that = $(this);
$.ajax({
url: "{% url 'batchaddtocartHomepage' %}",
type: 'POST',
data: that.serialize()
,success: function(data){
console.log('Success!');
var x = document.getElementById("qty");
var btn = document.getElementById("btn");
x.style.display = "block";
btn.style.display = "none";
}
});
return false;
});
});
</script>
my problem is when i click the Egg Large (1 Tray) Add to cart what changes is the Papaya Solo Ripe (1 pc) button
