Click the "Edit" button and add a hover form

Question

I have a pending button. That does nothing. Awesome. But what I would like to do is when the user hovers over it, a <form> appears and changes the "Wait" to "Cancel".

http://jsfiddle.net/ym4SK/

I am not a professional js. I do not know what I am doing wrong. Suggestions?

Your help is much appreciated, thanks!

Answer 1

Another way to do this is to use the .hover() function in jquery.

 $(function(){ $('button').hover( function(){ $(this).html('Cancel').removeClass("pending").addClass("cancel"); }, function(){ $(this).html('Pending').removeClass("cancel").addClass("pending"); } ); });​ 

check out this jsfiddle

Answer 2

Guess you missed $ ?

 $(function(){ function revealButton(shown, hidden) { $(shown).mouseenter(function(){ $(this).parent().next().children(hidden).show(); }); $(hidden).mouseleave(function(){ $(this).hide(); }); }; revealButton("button.pending", "button.cancel"); }());​ 

http://jsfiddle.net/ym4SK/1/

Updated script: http://jsfiddle.net/ym4SK/5/

Answer 3

Take a look at this: http://jsfiddle.net/ym4SK/4/

Well, it is initially canceled, but you can add a display: none on your .cancel button in HTML. Like here

 (function(){ function revealButton(shown, hidden) { $(shown).mouseenter(function(){ $(this).parent().next().children(hidden).show(); $(shown).hide(); }); $(hidden).mouseleave(function(){ $(this).hide(); $(shown).show(); }); }; revealButton("button.pending", "button.cancel"); }());​ 

Answer 4

jsFiddle demo

HTML changed:

 <div> <form method="POST" action="yaddaydahdasda"> <button class="pending">Pending</button> <button type="submit" class="cancel">Cancel</button> token here <input type="hidden" value="myvalue" /> </form> </div> 

Added to CSS:

 .cancel{ position:absolute; cursor:pointer; left:0px; top:0px; /* ... */ } 

JQuery fixed:

 (function(){ function revealButton(shown, hidden) { $(shown).mouseenter(function(){ $(this).next( $(hidden) ).show(); // fixed }); $(hidden).mouseleave(function(){ $(this).hide(); }); } revealButton(".pending", ".cancel"); }()); 

Answer 5

It is not 100% clear what you are trying to do, but it is my best guess:

http://jsfiddle.net/ym4SK/

 (function(){ function revealButton(shown, hidden) { $(hidden).hide(); $(shown).hover(function() { $(hidden).show(); $(shown).hide(); }, function() {}); $(hidden).hover(function() {}, function() { $(shown).show(); $(hidden).hide(); }); }; revealButton("button.pending", "button.cancel"); }());​ 

Note: it is best to use a hover for such things.

Answer 6

here's something, everything here is code instead of violin.

First of all, as your decleares question, you want the "Wait" button to change to "Cancel", so I removed another button from html

 <div> <input type='submit' class="pending" value='Pending' /> </div> <form method="POST" action="yaddaydahdasda" id="form"> {% csrf_token %} <input type="hidden" value="myvalue" /> </form>​ 

now some jQuery action.

 <script type='text/javascript'> $(document).ready(function() { // if jquery dosent load for some reason, form will be visible. Thats why we hide it when on DOM ready $("#form").hide(); }); $(".pending").on('mouseover',function() { $(this).removeClass('pending').addClass('cancel'); $(this).val('Cancel'); $("#form").show(); }); $(".pending").on('click', function(e) { e.preventDefault(); return false; }); $(".cancel").on('click',function() { $(this).removeClass('cancel').addClass('pending'); $(this).val('Pending'); $("#form").hide(); }); 

That's all! It works like a charm! You might want to add some css to form, for example. make it float next to a button or something like that?