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 Quote Link to comment Share on other sites More sharing options...
trq Posted March 18, 2010 Share Posted March 18, 2010 What exactly is your question? Quote Link to comment 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 Quote Link to comment Share on other sites More sharing options...
salathe Posted March 18, 2010 Share Posted March 18, 2010 Search for the term "inline editing". Quote Link to comment 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. Quote Link to comment 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 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.