Orionsbelter Posted March 18, 2010 Share Posted March 18, 2010 Ok so i have a price of $20.00 but when i click that price it turns into a text box with the price 20.00 inside it. Then after i click somewhere else it turn from a box into the same amount or an amount if i have changed it. Thank you for reading Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/ Share on other sites More sharing options...
trq Posted March 18, 2010 Share Posted March 18, 2010 What exactly is your question? Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/#findComment-1028032 Share on other sites More sharing options...
Orionsbelter Posted March 18, 2010 Author Share Posted March 18, 2010 Ok sorry for the confusion, imagine a four step process: on a page i have the text. Step 1: $20.00 // a price of $20.00 just some text. Step 2: Textfield with 20.00 // I click it to find it changes to a textfield with the value 20.00 already in it Step 3: Textfield with 20.00 i change to 12.00 // I change it to 12.00 as i think 20.00 is too high Step 4: $12.00 // i now click outside of the texfield which it now changes back to text only this time it says the edited amount. I need help doing this i really am willing to learn javascript i do have books but they don't cover this and i believe i learn better from looking at example code Thank you Thrope for replying Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/#findComment-1028036 Share on other sites More sharing options...
salathe Posted March 18, 2010 Share Posted March 18, 2010 Search for the term "inline editing". Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/#findComment-1028056 Share on other sites More sharing options...
trq Posted March 18, 2010 Share Posted March 18, 2010 Just because I'm board. <DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function() { var $fld = $('#fld'); $fld.click(function() { if (!$fld.hasClass('clicked')) { $fld.html('<input type="text" id="tx" value="'+$fld.html()+'">').addClass('clicked'); var $tx = $('#tx'); $tx.focus().keyup(function(e) { var key = (e.keyCode ? e.keyCode : e.which); if (key == 13) { $fld.html($tx.val()).removeClass('clicked'); } }); } }); }); </script> </head> <body> <div id="fld">$20</div> </body> </html> This does pretty much exactly what you want except the text input turns back into normal content once enter has been hit. PS: It relies on the jQuery framework. Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/#findComment-1028065 Share on other sites More sharing options...
Orionsbelter Posted March 18, 2010 Author Share Posted March 18, 2010 Thank you very much Thorpe you are a legend Will added it and learn from it now Link to comment https://forums.phpfreaks.com/topic/195663-how-would-i-do-this/#findComment-1028300 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.