EventHandler：单击按钮1时启用按钮2

Question

I have two buttons in my HTML page, and I would like to incorporate a functionality that on clicking button "Show Fields", the Make Edits button should get enabled. Currently, the button Make Edits is diabled. My HTML code is

<input type="submit" class="btn btn-info" name="showname" value="Show Fields" onclick ='editFunc()' style="margin-right: 5px;"/>
<input type="submit" class="btn btn-info" id = "makeEdits"  name="makeEdits" value="Make Edits" disabled ='disabled' style="margin-right: 5px;"/>

I have written Jquery for event handling :

function editFunc(){document.getElementById('makeEdits').disabled = false;}

The Make Edits button gets enabled for a second and then goes back to its normal state : ie it becomes disabled.

Can anyone please help.

Answer 1

If you are using jquery you don't need to use onClick, instead you give your button an id (in this case showName ):

<input type="button" class="btn btn-info" name="showname" value="Show Fields" id="showName" style="margin-right: 5px;"/>

The you can do:

$("#showName").on('click', function(){
    $('#makeEdits').prop('disabled', false);
});

Here's the JSFiddle

Answer 2

Just a sample and simple code:

$("#activation_btn").on('click', function(){
    if($("#edit_btn").is(':disabled'))
        $("#edit_btn").prop('disabled', false); //$("#edit_btn").removeAttr('disabled');
    else
        $("#edit_btn").prop('disabled', true); //$("#edit_btn").addAttr('disabled');
});

Answer 3

You are clicking a Submit button. This will call the js code you have, and then immediately post back to the server and refresh the page. This is why the button is disabled again so quickly - the page is back to its original state...