dmhall0 Posted February 1, 2012 Share Posted February 1, 2012 I have a standard html form that displays numeric values for 8 different fields. These increase based on other information and are typically marked as "readonly". I want to add a RESET link next to each field that allows the user to set these back to 0 (zero); then I have php UPDATE code already completed that updates the database. I assume I need a javascript function that does this, but my knowledge in this area is pretty much NULL. <a onclick="jsfunction" href="javascript:void(0);">Reset Value</a> Help with the function would be GREAT! Thanks Quote Link to comment Share on other sites More sharing options...
Andy-H Posted February 1, 2012 Share Posted February 1, 2012 <script type="text/javascript"> <!-- window.addEventListener('load', function() { var anchors = document.getElementsByTagName('a'); for( var k in anchors ) { if ( anchors[k].className.substring(0,5).toLowerCase() == 'reset' ) { anchors[k].addEventListener('click', function() { document.getElementById(this.className.substring(5).toLowerCase()).value = 0; }); } } }); //--> </script> <input type="text" name="test" id="test" value="4" disabled="disabled" ><a href="javascript:void(0);" class="resetTest" >Clear</a> Quote Link to comment Share on other sites More sharing options...
dmhall0 Posted February 1, 2012 Author Share Posted February 1, 2012 So something seems incorrect. I put the <script>...</script> in the <head> section and added the link as provided. I click on the link but nothing happens. Ideas? Thanks for the help! Quote Link to comment Share on other sites More sharing options...
Andy-H Posted February 1, 2012 Share Posted February 1, 2012 Did you change the link's class to reset followed by the ID of the input you want it to change? E.g. Say your input has an id of numberofapples (id="numberofapples") the link should have a class of resetnumberofapples (class="resetnumberofapples"), class is case insensitive, but ID MUST BE LOWER CASE. Quote Link to comment Share on other sites More sharing options...
dmhall0 Posted February 1, 2012 Author Share Posted February 1, 2012 Ahhh... that would be it. Very cool. It appears I have some page layout/formating to do and the Update isn't working exactly, but I can figure that part out. Awesome work! Thanks a TON Quote Link to comment Share on other sites More sharing options...
Andy-H Posted February 1, 2012 Share Posted February 1, 2012 No worries Quote Link to comment Share on other sites More sharing options...
Adam Posted February 2, 2012 Share Posted February 2, 2012 Just be aware this won't work for your IE friends using <= 8. addEventListener() is not supported until IE9 (despite it being a standard since DOM level 2 was released). Quote Link to comment Share on other sites More sharing options...
dmhall0 Posted February 2, 2012 Author Share Posted February 2, 2012 So then what would those users see... just a link that does nothing?! Thanks for the heads up. Quote Link to comment Share on other sites More sharing options...
Adam Posted February 2, 2012 Share Posted February 2, 2012 IE would throw an error because the function doesn't exist, which would likely break any JavaScript that follows. 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.