Geek Answers Handbook

Toggle edit buttons with save and cancel buttons

I want to change the button when pressed. At the beginning there is only one "Change" button. After I click on it, it will become the “Save” button, and I also want to show the “Cancel” button next to it. How can i do this? I have the code below.

<!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>demo by roXon</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <button data-text="Save">Edit</button> <p>Hello</p> <p style="display: none">Good Bye</p> <script> $("button").click(function(){ $(this).nextUntil('button').toggle(); var btnText = $(this).text(); $(this).text( $(this).data('text') ); $(this).data('text', btnText ); }); </script> </body> </html>
+4
source share
2 answers

I suggest layout and jQuery like this jsFiddle example .

JQuery

 $('.edit').click(function() { $(this).hide(); $(this).siblings('.save, .cancel').show(); }); $('.cancel').click(function() { $(this).siblings('.edit').show(); $(this).siblings('.save').hide(); $(this).hide(); }); $('.save').click(function() { $(this).siblings('.edit').show(); $(this).siblings('.cancel').hide(); $(this).hide(); });

HTML

 <form> <div> <input class="edit" type="button" value="Edit" /> <input class="save" type="button" value="Save" /> <input class="cancel" type="button" value="Cancel" /> </div> <div> <input class="edit" type="button" value="Edit" /> <input class="save" type="button" value="Save" /> <input class="cancel" type="button" value="Cancel" /> </div> <div> <input class="edit" type="button" value="Edit" /> <input class="save" type="button" value="Save" /> <input class="cancel" type="button" value="Cancel" /> </div> </form>

CSS

 .save, .cancel { display:none; }​
+2
source

You can add a new button to cancel and just hide it as needed. you can read the demo

here is the code if you need it:

 <button id='EditSave' data-text="Save">Edit</button> <button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button> <p>Hello</p> <p style="display: none">Good Bye</p>​ $("#EditSave").click(function(){ var btnText = $(this).text(); if(btnText == 'Edit') { $(this).text('Save'); $('#Cancel').show(); } else { $(this).text('Edit'); $('#Cancel').hide(); } }); $('#Cancel').click(function(){ $(this).hide(); $('#EditSave').text('Edit'); });​
+3
source

More articles:


All Articles