Find the Quantity, Unit Price and Total Cost Shopping Cart - javascript

Hello I am having some difficulty with my shopping cart script. So far I have it so you can update how many quantities of the item you want and it also updates the price as well. I want it so that once you click a button that says "Add To Cart" it sends you to a page that displays your order and tells you the Quantity, Unit Price and Total Cost of it.
Below is the code I have so far.
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#Quantity").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});
$("#Quantity").change(function(event) {
$(this).val(Math.abs($(this).val()));
UpdatePrice();
});
$("#CartForm").submit(function(event) {
if(!isNormalInteger($("#Quantity").val()))
{
event.preventDefault();
alert("Sorry, you must select at least one of these DVD's!");
return false
}
});
UpdatePrice();
});
function UpdatePrice() {
var AdjustedPrice = parseFloat($("#BaseUnitPrice").val())*parseInt($("#Quantity").val());
$("#AdjustedPrice").html(AdjustedPrice.toFixed(2) + $("#Currency").val());
}
function ChangeQuantity(Value) {
var NewQuantity = parseInt($("#Quantity").val()) + parseInt(Value);
if(NewQuantity < 1) NewQuantity = 1;
$("#Quantity").val(NewQuantity);
UpdatePrice();
}
function isNormalInteger(str) {
return /^\+?(0|[1-9]\d*)$/.test(str);
}
</script>
HTML/PHP:
echo'<div class="right"><img alt="Picture" src="dvdcovers/wolverine.jpg" height="100" width="100" /></div>';
echo'<font color="white">';
echo'<br />';
echo'<b>Title:</b> The Wolverine';
echo'<br />';
echo'<b>Quantity:</b> $Quantity;';
echo'<br />';
echo'<b>Unit Price:</b>';
echo'<br />';
echo'<b>Total Cost:</b>';
echo'</font>';
echo'<br /><br />';
echo'<h3 class="widget-title">Purchasing And Payment</h3>';
echo'<form action="cart.php" method="post" id="CartForm">';
echo'<b>Unit Price: </b><div id="AdjustedPrice"></div>';
echo'<br />';
echo'<input type="hidden" id="Currency" value=" AUD" />';
echo'<input type="hidden" id="BaseUnitPrice" name="UnitPrice" value="29.99" />';
echo'<input type="hidden" name="ProductCode" value="000" />';
echo'<br />';
echo'<input type="text" id="Quantity" name="Quantity" value="1" />';
echo'<input type="button" value="-" onclick="ChangeQuantity(-1);" />';
echo'<input type="button" value="+" onclick="ChangeQuantity(1);" />';
echo'<br />';
echo'<input type="Submit" value="Buy" />';
echo'</form>';
Basically I would like to know how to get the value of quantity, unit price and total cost to a new php page that displays these details. Any help would be great. Thankyou.

Have you tried storing variables in a session after you submit the form?
/*
Cart.php
*/
// start session
session_start();
// store session data
$_SESSION['Quantity'] = $_POST['Quantity'];
$_SESSION['UnitPrice'] = $_POST['UnitPrice'];
$_SESSION['TotalCost'] = $_SESSION['UnitPrice'] * $_SESSION['Quantity'];
echo "<br>Quantity => " .'$'. $_SESSION['Quantity'];
echo "<br>UnitPrice => " .'$'. $_SESSION['UnitPrice'];
echo "<br>TotalCost => " .'$'. $_SESSION['TotalCost'];

Related

jquery append and remove dynamic table row errors

I have an issue with my jquery code. It is designed to append new table row when the ajouter button is clicked.
It works well except that it adds rows depending on the number of rows already present. If there are five rows on the table and you click the add button it will add five empty rows instead of one and I don't know where the error is coming from.
This is the code:
<?php
echo '<td>'
. '<input type="button" class="deleteButton" value="Supp."/> '
. '<a href="javascript:void(0);" >'
. '<input type="button" class="addCF" value="Ajouter"/>'
. '</a>'
. '</td>';
echo'</tr>';
?>
<script>
$(document).ready(function () {
$(".addCF").click(function () {
$("#demoajax").append('<tr><td><input type="text" name="brice2[]" value="" placeholder="Ref" /> </td><td><input type="text" name="brice[]" value="" placeholder="Label" /></td><td><input type="text" name="mytext[]" value="" placeholder="Quantite en besoin" /></td><td><input type="text" name="brice51[]" value="" placeholder="Unite" /></td><td><input type="text" name="brice52[]" value="" placeholder="Fabrication Utile" /></td><td> <input type="button" value="Supp"/></td></tr>');
});
$("#demoajax").on('click', '.remCF', function () {
$(this).parent().parent().remove();
});
});
</script>

Get all input fields and retain values inside text fields even after button submit using javascript and php

I have multiple input fields and random input names, what I want to achieve is get the data entered in the text fields but then on clicking on the submit button, the data entered will remain.
Sample code:
for($i=0;$i<$count1;$i++) {
echo '<input type="text" name="'.$random1.'" value=""/>';
}
for($j=0;$j<$count2;$j++) {
echo '<input type="text" name="'.$random2.'" value=""/>';
}
for($k=0;$k<$count3;$k++) {
echo '<input type="text" name="'.$random3.'" value=""/>';
}
echo '<input type="submit" name="submit" value="submit"/>'
The problem here is that I don't know what are the 'input names'. I want the values entered by user into this text fields remain. How would I do that? If you don't know what the 'input names' are?
Can you use hidden inputs to keep tracks of the names? Like this:
for($i=0;$i<$count1;$i++) {
$value=getValueFor("section1-$i");
echo '<input type="text" name="'.$random1.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section1-'.$i.'" value="'.$random1.'"/>';
}
for($j=0;$j<$count2;$j++) {
$value=getValueFor("section2-$j");
echo '<input type="text" name="'.$random2.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section2-'.$j.'" value="'.$random2.'"/>';
}
for($k=0;$k<$count3;$k++) {
$value=getValueFor("section3-$k");
echo '<input type="text" name="'.$random3.'" value="'.$value.'"/>';
echo '<input type="hidden" name="section3-'.$k.'" value="'.$random3.'"/>';
}
where getValueFor should be a function which checks what you got from GET or POST. For example:
function getValueFor($x){
$res = "";
if (isset($_REQUEST[$x])){
$name=$_REQUEST[$x];
$res = $_REQUEST[$name];
}
return res;
}
That should work :
if (isset($_POST['random'])) {
foreach ($_POST['random'] as $key => $randomName) {
${"random" . $key . "value"} = $randomName;
}
}
for($i=0;$i<$count1;$i++) {
echo '<input type="text" name="'.$random1.'" value="'.$random1value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random1.'"/>';
}
for($j=0;$j<$count2;$j++) {
echo '<input type="text" name="'.$random2.'" value="'.$random2value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random2.'"/>';
}
for($k=0;$k<$count3;$k++) {
echo '<input type="text" name="'.$random3.'" value="'·$random3value.'"/>';
echo '<input type="hidden" name="random[]" value="'.$random3.'"/>';
}
echo '<input type="submit" name="submit" value="submit"/>'`enter code here`;
}

Make Wish List Dynamic for each item/ article

HI i got a little Problem i have whish list script which adds artivcles from shop into a session and saves them but when i click on the which list he only adds the first item how to male it dynamic that every wish list click is for the individual item in the shop
my article structure, onclick of wlbutton1 or wlbutton2 he should add the article with id1 or 2 to the wishlist:
echo '<div class="span3 filter--'.$obj->product_prop1.'" data-price="'.substr($obj->price, 0, -3) . '" data-popularity="3" data-size="s|m|xl" data-color="pink|orange" data-brand="'.$obj->product_brand.'">';
echo '<div class="product">';
echo '<div class="product-img featured">';
echo '<form method="post" action="../cart_update.php">';
echo '<div class="picture"><img src="images/'.$obj->product_img_name.'">';
echo '<div class="img-overlay"><button class="add_to_cart btn more btn-primary">Kaufen</button>...mehr</div>';
echo '</div>';
echo '</div>';
echo '<div id="result"></div>';
echo '<div class="main-titles"><h4 class="title">'.$currency.$obj->price.'</h4>';
echo '<h5 class="no-margin isotope--title" id="product'.$obj->id.'">'.$obj->product_name.'</h5>';
echo '<p class="no-margin pacifico" style="position: absolute;right: 10px;top: 5px; text-transform: capitalize;">'.$obj->product_brand.'</p>';
echo '<p class="no-margin" style="position: absolute;right: 10px;top: 25px;"><a class="wl-button'.$obj->id.'"><i class="icon-gift"></i></a></p>';
echo '</div>';
echo '<p class="desc">'.substr($obj->product_desc, 0, 160) . '...</p>';
echo '<input type="hidden" name="product_qty" value="1" />';
echo '<input type="hidden" name="product_code" value="'.$obj->product_code.'" />';
echo '<input type="hidden" name="type" value="add" />';
echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
echo '</form>';
echo '</div>';
echo '</div>';
My Jquery Code how to make it dynamic and individual for eacht artivle?:
$(".wl-button").click(function() {
var wlproduct = $('#product').text();
var wlproducturl = $('#producturl').attr('href');
$.ajax({
type : "POST",
url : "../assets/wlscript.php",
data : { wlproduct : wlproduct, wlproducturl : wlproducturl },
success : function(data) {
$('div#result').text('You added '+wlproducturl+' '+wlproduct+'\'s to your wishlist.');
}
});
});
Here an example of how you can do to find the data you need to add your article.
First the HTML example :
<div class="products">
<form>
<p>
<!-- Fist article -->
<span>Article 1</span>
<!-- A name construct so that I can easilly find in which iteration of the loop I am -->
<input type="hidden" name="article[0].id" value="1" />
<input type="hidden" name="article[0].name" value="article1" />
<button class="addButton">Add article</button>
</p>
<p>
<!-- Second article -->
<span>Article 2</span>
<input type="hidden" name="article[1].id" value="2" />
<input type="hidden" name="article[1].name" value="article2" />
<button class="addButton">Add article</button>
</p>
<!-- … others articles -->
</form>
</div>
And the Javascript part :
$(document).ready(function(){
$(".addButton").on("click", function(event){
event.preventDefault();
var button = $(this);
var parent = button.parent(); // We need to find the container in which to seach our fields.
var idArticle = parent.find("input[name$='.id']").val(); // Find the ID
var nameArticle = parent.find("input[name$='.name']").val(); // Find ather data
alert("Add article with id = " + idArticle + " and name = " + nameArticle);
// Next step is the ajax method to call the server with the correct data.
});
});
By working like that, you can then send to your server the data you need to add an article to your wishlist.
Here the link to the JS Fiddle example.
In this example, you can see how to work around the HTML content from the button to find the inputs.
You can find more about "tree traversal" with the jQuery API.

Javascript Add New Input Field in Increasing Order

I'm having trouble getting my javascript to add a variable to getElementById. What I'm doing is allowing the users to have 10 authors per post. The script shows the authors already entered in the system and now I'm trying to allow them to add more input fields only to the point that 10 fields show up. Here is the code I have so far:
$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
$showauthor = $getauthorsrow['author'];
$authorid = $getauthorsrow['ID'];
echo "<input type='text' value='$showauthor' name='authorname[]'>
<input type='hidden' value='$authorid' name='authorid[]'><br><br>";
$y++;
}
$newy=$y-1;
?>
//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
function addInput<?php echo $i; ?>() {
if (fields != 10) {
//HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
//So if it's the first post and the new field divs start a 5
//Then it should getElementByid('text05') and continue on.
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
}
</script>
//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
echo "<div id='text".$i.$w."'></div>";
$w++;;
}
//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>
$i is the post number starting from 0. The php to make the divs works fine. I'm just getting null for the getElementById in the javascript. What am I getting wrong here?
HTML Output Example:
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform0.add0.disabled=true;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
</form>
Try assigning that concatenated string to a JS variable first, then calling the function:
if (fields != 10) {
var currentText = 'text<?php echo $i; ?>' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
I need to add the $i to the fields variable in the javascript. With multiple files it was doing multiples of the same variable...i works.
Hi I have modified your code for html and JavaScript.
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
var myout = "Only 10 authors allowed.";
document.getElementById("stat").innerHTML = myout;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
Check it and let me know, if it is solved.

how to hide input values or disable from parsing into table on select

im working with a form and im thinking of making a radio button so that if the no is selected, the row of input will be disabled or hidden or something. So that when it is parsed to the next page, the hidden value is gone and not parsed together with the other values. How do i go about doing it ? Example the row with value of Examination and Consultation. How do i make it so that it will not send any value to the next page when i select a radio button with value of no?
Form
<script type="text/javascript">
var count = 0;
function addTextArea(){
count= count+1;
var div = document.getElementById('name');
div.innerHTML += "<div> <input type='text' name='name[]' value='' "+"id=name"+count+"> </div>";
//div.innerHTML += "\n<br />";
var div = document.getElementById('quantity');
div.innerHTML += "<div><input type='text' name='quantity[]' value ='' "+"id=quantity"+count+"></div>";
//div.innerHTML += "\n<br />";
var div = document.getElementById('amount');
div.innerHTML += "<div><input type='text' name='amount[]' value ='' "+"id=amount"+count+"></div>";
//div.innerHTML += "\n<br />";
}
function removeTextArea(){
document.getElementById("name"+count).remove();
document.getElementById("quantity"+count).remove();
document.getElementById("amount"+count).remove();
count = count-1;
}
</script>
</head>
<body>
<form method="POST" action="confirm_invoice.php" >
<?php
echo "<table border='2'>\n";
echo "<tr>\n";
echo "<th>Description</th>\n";
echo "<th>Quantity</th>\n";
echo "<th>Amount($)</th>\n";
echo "</tr>";
echo "<tr>";
echo "<td>"?><input type='text' size="50" name='name[]' value='Examination and Consultation' readonly/><?php "</td>";
echo "<td>"?><input type='text' size="50" name='quantity[]' value='' /><?php "</td>";
echo "<td>"?><input type='text' size="50" name='amount[]' value='' /><?php "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"?><input type='text' size="50" name='name[]' value='Anesthesia' readonly/><?php "</td>";
echo "<td>"?><input type='text' size="50" name='quantity[]' value='' /><?php "</td>";
echo "<td>"?><input type='text' size="50" name='amount[]' value='' /><?php "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"?><div id="name"></div> <?php "</td>";
echo "<td>"?><div id="quantity"></div> <?php "</td>";
echo "<td>"?><div id="amount"></div> <?php "</td>";
echo "</tr>";
?>
<br />
<input type="button" value="Add Description" onClick="addTextArea();">
<input type="submit" name="submit" value="submit">
<input type="button" value="Remove Description" onClick="removeTextArea();">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
you should give the attribute disabled="disabled" to the input to prevent it to be sent to the next page with the form post.
use a function like this in js:
function disableInputs(cnt)
{
document.getElementById("name"+cnt).disabled = "disabled";
document.getElementById("quantity"+cnt).disabled = "disabled";
document.getElementById("amount"+cnt).disabled = "disabled";
}
and your radio should look like this:
<input type="radio" name="disableInput" value="1" onclick="javascript:disableInputs(1)">
so in your js function you could add it like this:
function addTextArea(){
count= count+1;
var div = document.getElementById('name');
div.innerHTML += "<div> <input type='text' name='name[]' value='' "+"id=name"+count+"> </div>";
var div = document.getElementById('quantity');
div.innerHTML += "<div><input type='text' name='quantity[]' value ='' "+"id=quantity"+count+"></div>";
var div = document.getElementById('amount');
div.innerHTML += "<div><input type='text' name='amount[]' value ='' "+"id=amount"+count+"></div>";
div.innerHTML += "<div><input type='radio' name='disableInput' value='1' onclick='javascript:disableInputs(" + count + ")'></div>";
}

Categories