javascript - jquery onchange impacted by post event? -
i creating store products listed options (ie different sizes via drop down , different fabrics via selection of radio buttons). (check out www.searing.me/newstore)
i wrote following code if selection made, price updated without needing post , refreshing top of screen. problem - when "add cart" prices getting updated price selected.
so, in essence, on first product, if select "brown chord" option add $2.25 - price changes adding $2.25 $30.00 - $32.25. however, when click add cart - product right changed price $2.25 well.
i assume has post registering onchange event each....i don't know. , i'm beginner jquery/javascript know what's happening.
script is:
function updateprice(e) { var product = $(e.target).closest('.product'); var price = parsefloat(product.data('price')); var sizeprice = parsefloat(product.find('[name=sizeselect] :selected').data('price')); if (isnan(sizeprice)) { sizeprice = 0; } var patternprice = parsefloat(product.find('[name=fabric]:checked').data('price')); if (isnan(patternprice)) { patternprice = 0; } var totalprice = price + sizeprice + patternprice; product.find('.totalcost').text('$' + totalprice.tofixed(2)); } $(document).ready(function(){ $(document).on('change', '.product', updateprice); } what need prevent other products updating price on add cart?
edit: first, important note script runs perfect point submit button clicked. once button clicked, updates prices.
here's page script:
<?php echo "<div><img style='padding-left:35px; float:left;' src='/images/just11stitchesbannerii.png'></div>"; echo "<div style='float:right; padding-right:55px;'>"; echo return_categories($dbconnection); echo "</div>"; if ($cart->countitems() > 0) { echo '<div style="float:right; clear:left; padding-right:50px;"> <a style="outline:0;" class="gallery2" href="shoppingcartdev.php"><img style="width:55px; padding-left:75px;" src="/images/scart.png"></img></a><br/> <span style="font-size:.75em;">you have ' . $cart->countitems() . ' item(s) in shopping cart.</span> </div>'; } else { echo '<div style="float:right; clear:left; padding-right:50px;"> <img style="width:55px; padding-left:75px;" src="/images/scart.png"></img><br/> <span style="font-size:.75em;">you have ' . $cart->countitems() . ' in shopping cart.</span> </div>'; } echo '<h1 style="clear:left; padding-top:5px;">products</h1>'; // find out if page displaying products or if being filtered $testproducts = new products(); if (isset($_post['category_submit']) && isset($_post['categories'])) { $_post['test'] = 'false'; $linkarray = printfilteredproductlinks("/newstore", $dbconnection->db, $_post['categories']); $myarray = $testproducts->getselectedorderproducts($linkarray["order_by"], $linkarray["start"], $linkarray["display"], 1, $_post['categories']); } else { $_post['test'] = 'false'; $linkarray = printproductlinks("/newstore", $dbconnection->db, 1); $myarray = $testproducts->getorderproducts($linkarray["order_by"], $linkarray["start"], $linkarray["display"], 1); } $counter = 0; $i = 0; $flag = 0; // used check if @ end of table , 1 cell row $stepthroughitemcount =0; $itemcount = count($myarray); if ($itemcount % 2 == 1) { $counter = floor( $itemcount / 2 ); // if flag = 1 there 1 more cell make in final row. $flag = 1; } else { $counter = $itemcount / 2; } // start table echo "<table style='margin:5px; border-spacing:5px;'>"; while ($i < $counter) { $tdcount = 0; while ($tdcount < 2) { $optioncount = 0; $mysizes = new sizes($myarray[$stepthroughitemcount]->getid()); $mypatterns = new patterns($myarray[$stepthroughitemcount]->getid()); echo "<td valign='top' class='product' data-price='" . returntotalprice($myarray[$stepthroughitemcount]->getprice()) . "' style='width:575px; padding-top:8px; border: 2px solid green; padding:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #acbf9a;'> <div style='width:175px; float:left; text-align:center;'> <a style='display:inline; float:none;' class='gallery' href='/prod_pics/" . $myarray[$stepthroughitemcount]->getpicturename() . "'><img id='picture' src='/red_prod_pics/" . $myarray[$stepthroughitemcount]->getpicturename() . "'</img></a> <p class='totalcost' style='text-align:center; margin-top:0px;'>$" . number_format(returntotalprice($myarray[$stepthroughitemcount]->getprice()), 2) . "</p> <form id='productform' enctype='multipart/form-data' action='newstore.php' method='post'> <input type='hidden' name='product_id' value='{$myarray[$stepthroughitemcount]->getid()}' /> <input type='hidden' name='product_price' value='{$myarray[$stepthroughitemcount]->getprice()}' /> <p style='font-size:.7em; border:1px solid #008000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ddf0dd; padding:2px;'>" . $myarray[$stepthroughitemcount]->getdescription() . "</p> <input style='display:inline; margin-top:5px; float:none;' type='submit' name='addcart' value='add cart'/> </div> <div style='margin-left:10px; float:left; width:373px;'> <span style='font-weight:bold;'>sizes:</span> <span style='padding-left:100px;'> <select name='sizeselect' style='width:200px; text-align:right;'>"; if (isset($_post['addcart'])){ foreach ($mysizes->getallsizes() $value) { //echo "<option>valuesid = " . $value->getsid() . " postsizeselect = " . $_post['sizeselect'] . "</option>"; echo "<option " . ( $value->getpsid() == $_post['sizeselect'] ? 'selected' : '') . " data-price='" . $value->getsprice() . "' value=" . $value->getpsid() . ">" . $value->getsname() . "  $" . number_format($value->getsprice(), 2) . "</option>"; } } else { foreach ($mysizes->getallsizes() $value) { //echo $value->getsid() . ' ' . $myarray[$stepthroughitemcount]->getdefaultsize(); echo "<option " . ( $value->getsid() == $myarray[$stepthroughitemcount]->getdefaultsize() ? 'selected' : '') . " data-price='" . $value->getsprice() . "' value=" . $value->getpsid() . ">" . $value->getsname() . "  $" . number_format($value->getsprice(), 2) . "</option>"; } } echo "</select> </span> <br/> <span style='font-weight:bold;'>fabrics & colors:</span><br/> <table> <tr>"; $rowcount = 0; foreach ($mypatterns->getallpatterns() $value2) { if ($rowcount % 4 == 0) { echo '</tr> <tr>'; } echo '<td style="float:left; width:85px; text-align:center; "> <img src="/patterns/' . $value2->getpatpicturename() . '" /><br/> <span style="font-size:.65em; width:65px; color: #132301;">' . $value2->getpatname() . '</span><br/> <span>$' . number_format($value2->getpatprice(), 2) . '</span><br/> <input data-price="' . $value2->getpatprice() . '" type="radio" ' . ( $value2->getpatid() == $myarray[$stepthroughitemcount]->getdefaultfabric() ? "checked=\'checked\'" : "") . ' name="fabric" value=' . $value2->getppid() . ' /> </td>'; $rowcount +=1; } echo '</tr> </table> </div></form> </td>'; $stepthroughitemcount +=1; $tdcount +=1; } echo "</tr>"; $i+=1; } if ($flag == 1 ) { $mysizes = new sizes($myarray[$stepthroughitemcount]->getid()); $mypatterns = new patterns($myarray[$stepthroughitemcount]->getid()); echo "<tr> <td valign='top' class='product' data-price='" . returntotalprice($myarray[$stepthroughitemcount]->getprice()) . "' style='width:575px; padding-top:8px; border: 2px solid green; padding:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #acbf9a;'> <div style='width:175px; float:left; text-align:center;'> <a style='display:inline; float:none;' class='gallery' href='/prod_pics/" . $myarray[$stepthroughitemcount]->getpicturename() . "'><img id='picture' src='/red_prod_pics/" . $myarray[$stepthroughitemcount]->getpicturename() . "'</img></a> <p class='totalcost' style='text-align:center; margin-top:0px;'>$" . number_format(returntotalprice($myarray[$stepthroughitemcount]->getprice()), 2) . "</p> <form id='productform' enctype='multipart/form-data' action='newstore.php' method='post'> <input style='display:inline; float:none;' type='submit' name='addcart' value='add cart'/> <input type='hidden' name='product_id' value='{$myarray[$stepthroughitemcount]->getid()}' /> <input type='hidden' name='product_price' value='{$myarray[$stepthroughitemcount]->getprice()}' /> </div> <div style='margin-left:10px; float:left; width:373px;'> <span style='font-weight:bold;'>sizes:</span> <span style='padding-left:100px;'> <select name='sizeselect' style='width:200px; text-align:right;'>"; foreach ($mysizes->getallsizes() $value) { //echo $value->getsid() . ' ' . $myarray[$stepthroughitemcount]->getdefaultsize(); echo "<option " . ( $value->getsid() == $myarray[$stepthroughitemcount]->getdefaultsize() ? 'selected' : '') . " data-price='" . $value->getsprice() . "' value=" . $value->getpsid() . ">" . $value->getsname() . "  $" . number_format($value->getsprice(), 2) . "</option>"; } echo "</select> </span> <br/> <span style='font-weight:bold;'>fabrics & colors:</span><br/> <table> <tr>"; $rowcount = 0; foreach ($mypatterns->getallpatterns() $value2) { if ($rowcount % 4 == 0) { echo '</tr> <tr>'; } echo '<td style="float:left; width:85px; text-align:center; "> <img src="/patterns/' . $value2->getpatpicturename() . '" /><br/> <span style="font-size:.75em">' . $value2->getpatname() . '</span><br/> <span>$' . number_format($value2->getpatprice(), 2) . '</span><br/> <input data-price="' . $value2->getpatprice() . '" type="radio" ' . ( $value2->getpatid() == $myarray[$stepthroughitemcount]->getdefaultfabric() ? "checked=\'checked\'" : "") . ' name="fabric" value=' . $value2->getppid() . ' /> </td>'; $rowcount +=1; } echo '</tr> </table> </div></form> </td> </tr>'; } echo "</table>"; if (isset($_post['category_submit']) && isset($_post['categories'])) { printfilteredproductlinks("/newstore", $dbconnection->db, $_post['categories']); } else { printproductlinks("/newstore", $dbconnection->db, 1); } echo '</body> </html>'; ?>
i think right , event triggered again.
i guess happens because submit buttons have same id , updateprice function called each article.
just give try , remove id of submit buttons.
Comments
Post a Comment