man5 Posted February 22, 2014 Share Posted February 22, 2014 (edited) Say I have this code. $percent = 50; $old_price = 100; $discount_value = ($old_price / 100) * $percent; $new_price = $old_price - $discount_value; <form method="post" action="" enctype="multipart/form-data"> Old Price : <input type="number" name="old_price" min="1" max="5" value="<?php echo $old_price; ?>"><br> discount : <input type="number" name="percent" min="1" max="3" value="<?php echo $percent; ?>"><br> new price : <input type="number" name="new_price" min="1" max="5" value=" "> <input type="submit" id="submit" value="submit"> How do I make it so that the new_price field automatically updates in the form after I input the old_price and percent fields? Edited February 22, 2014 by man5 Quote Link to comment Share on other sites More sharing options...
WebStyles Posted February 23, 2014 Share Posted February 23, 2014 if you want it to update without refreshing the page, I suggest javascript to calculate the percentage and then write it to the appropriate field Quote Link to comment Share on other sites More sharing options...
mogosselin Posted February 23, 2014 Share Posted February 23, 2014 It depends what you mean by "automatically updates". Like WebStyles said, if you meant "without refreshing the page", then you'll need to use JavaScript. You could use something like: <script> function updateNewPrice() { var oldPrice = document.getElementByName("old_price"); var discountPrct = document.getElementByName("percent"); var discount = ($old_price / 100) * discountPrct; document.getElementByName("new_price").value = discount;< } </script> Then, in your 2 input fields (old_price and discount), add an attribute like: onChange="updateNewPrice()"; Example: <input onChange="updateNewPrice()" type="number" name="old_price" min="1" max="5" value="<?php echo $old_price; ?>"> If you meant "update price with PHP", then you'll almost there. Adding something like: $percent = $_POST["percent"]; $old_price = $_POST["old_price"]; if (empty($percent)) $percent = 50; if (empty($old_price)) $old_price = 100; Note that I didn't test the code, but I hope it can help you a little bit Quote Link to comment Share on other sites More sharing options...
man5 Posted February 23, 2014 Author Share Posted February 23, 2014 (edited) Yes that's the type of script I was looking for. By updating, I ment without reloading the page. As I know, only with ajax you can do. Although it's not working for me right now, I am going to play around with it. Here is the basic setup i have. Tell me if it's wrong. <html> <head> <script> function updateNewPrice() { var oldPrice = document.getElementByName("old_price"); var discountPrct = document.getElementByName("percent"); var discount = ($old_price / 100) * discountPrct; document.getElementByName("new_price").value = discount; } </script> </head> <body> <form method="post" action="" enctype="multipart/form-data"> old Price : <input onChange="updateNewPrice()" type="number" name="old_price" value=""><br> discount : <input onChange="updateNewPrice()" type="number" name="percent" value=""><br> new price : <input type="number" name="new_price" value=""><br> <input type="submit" id="submit" value="submit"> </form> </body> </html> Edited February 23, 2014 by man5 Quote Link to comment Share on other sites More sharing options...
mogosselin Posted February 23, 2014 Share Posted February 23, 2014 Nice start! Try with something like this: <html> <head> <script> function updateNewPrice() { var oldPrice = document.getElementsByName("old_price")[0].value; var discountPrct = document.getElementsByName("percent")[0].value; if (!isNaN(oldPrice) && !isNaN(discountPrct)) { var discount = (oldPrice / 100) * discountPrct; if (discount > 0) document.getElementsByName("new_price")[0].value = discount; } } </script> </head> <body> <form method="post" action="" enctype="multipart/form-data"> old Price : <input onkeydown="updateNewPrice()" type="number" name="old_price" value=""><br> discount : <input onkeydown="updateNewPrice()" type="number" name="percent" value=""><br> new price : <input type="number" name="new_price" value=""><br> <input type="submit" id="submit" value="submit"> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
man5 Posted February 23, 2014 Author Share Posted February 23, 2014 Excellent! Works like a charm. You have saved me ton of time trying to figure this out by myself. Thank you mongosselin!!! Quote Link to comment Share on other sites More sharing options...
man5 Posted March 5, 2014 Author Share Posted March 5, 2014 (edited) Hi mogosselin, thought it would be better to revive an old topic rather than starting a new one. It isn't till now that I notice the problem with the percentage code that you did for me. What I noticed is that when it calculates the new_price, it kind of does the reverse calculation. For example. old_price = $100 percent = 50% new_price = $50 All good there. Now try this. old_price = $100 percent = 40% new_price = $40..how ever, I would like to show the difference between new_price and old_price; which is $60. This $60 should be the new price. Can you help me out here? Thanks a bunch! Edited March 5, 2014 by man5 Quote Link to comment Share on other sites More sharing options...
man5 Posted March 5, 2014 Author Share Posted March 5, 2014 So i figured it out. Ajax and math aren't my strong suits yet but it works now. Below is the updated code. <script> function updateNewPrice() { var oldPrice = document.getElementsByName("old_price")[0].value; var discountPrct = document.getElementsByName("percent")[0].value; if (!isNaN(oldPrice) && !isNaN(discountPrct)) { //var discount = (oldPrice / 100) * discountPrct; var count = (discountPrct / 100) * oldPrice; var discount = oldPrice - count; if (discount > 0) document.getElementsByName("new_price")[0].value = discount; } } </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.