How to replace a button in jquery?

Question

I am displaying some records table where each row contains two buttons like

"Accept" and "Reject"

If I click on "Accept" then the form should be submitted and the button should Replace with "Cancel" button and page should reload with fresh content in the table.

And If I click on "Reject" button then "Accept" button should hide And page should reload with fresh content.

I have tried something but did not work.

$(document).ready(function(){
      $("#upComing").submit(function(){
        alert("Submitted");
      });
      $("#btnAccept").click(function(){
          $("form[value='Accept${upComLeave.employee_id}']").submit();
          location.replace("#btnCancel");

      });  
    });

please help me.

Hide btnAccept and show btnCancel, using .hide() and .show() — Satpal
– Satpal, Commented Apr 7, 2014 at 9:57
I did try but did not work because the form is getting submit and not going further — user3448105
– user3448105, Commented Apr 7, 2014 at 10:00

Rui · Accepted Answer · 2014-04-07 10:20:17Z

1

You can have three buttons, Accept, Cancel (hidden at first) and Reject and show and hide them to achieve what you describe:

$('#btAccept').click(function(){
    $(this).hide();
    $('#btCancel').show(); 
    //submit form
});

$('#btCancel').click(function(){
    //cancel ajax request
    return false; //prevent form from submitting
});

$('#btReject').click(function(){    
    $('#btAccept').hide(); 
    //refresh content
    return false; //prevent form from submitting
});

Here's a fiddle that shows it working.

edited Apr 7, 2014 at 10:20

answered Apr 7, 2014 at 10:04

Rui

4,9163 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3448105 Over a year ago

I tried your solution and the button is getting replaced but if I refresh the page then form is submitting twice i.e.duplicate submit

user3448105 Over a year ago

how to restrict that?

Rui Over a year ago

@user3448105 if you don't want the button to automatically submit the form you can return false from the handler. I'll update the answer. Also, you might want to check the section "The event handler and its environment" here.

user3448105 Over a year ago

I got your answer.I have been trying on duplicate form submition in spring and jquery however,have not succeed.

user3448105 Over a year ago

I want the button to submit the form But,When we refresh the page then it should not submit twice right?

Collectives™ on Stack Overflow

How to replace a button in jquery?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related