Replacing html button with jquery

Question

I've done some research regarding on how to replace/change the original html button to another. But neither the ways are working.

Here are my codes:

Javascript:

var editBtn = "editBtn" + id; //in order to get the id of the edit button
var cSave = document.getElementById(editBtn);
cSave.innerHTML = "<td><button id='saveBtn' onclick='saveChange(" + id + ");' >Save</button></td>";

The code above is just adding a button inside the existing button.

HTML:

<table>
<td>
<%
  out.println("<button id='editBtn" + mc.getId() + "' onclick='editMC(this.id);'>Edit</button>");
%>
</td>
</table>

The mc.getId() is a method to get the "id".

The latest approach that I've tried is mentioned below, but it's not working:

document.getElementById(editBtn).onclick = function() {saveChange(id)};

And:

$(document).ready(function () {
      $("#editBtn").replaceWith("<td><button id='saveBtn' onclick='saveChange(" + mcId + ");' >Save</button></td>");
});

Anyhow I can do to change the edit button to save button while onclick() is performed?

You tagged this question as jquery, so have you tried to use it? — Roko C. Buljan
– Roko C. Buljan, Commented Jun 23, 2014 at 3:25
document.getElementById(editBtn) , IS editBtn Variable ? , if not then make it document.getElementById("editBtn") — Maulik Anand
– Maulik Anand, Commented Jun 23, 2014 at 3:29
#editBtn is not the ID of the button, it's calling a function that adds something to the ID. — adeneo
– adeneo, Commented Jun 23, 2014 at 3:30
@user3743562 In your example you're replacing even the TD element which is wrong. Take a look at my demo. — Roko C. Buljan
– Roko C. Buljan, Commented Jun 23, 2014 at 3:40
thanks guys, so far the way that Anjum provided works for me :) — MMM
– MMM, Commented Jun 23, 2014 at 3:58

AnjumSKhan · Accepted Answer · 2014-06-23 03:30:31Z

1

You can change the text of the button from Edit to Save using innerHtml. You are actually putting some html inside the button element. Try

var cSave = document.getElementById(editBtn);
cSave.innerHTML = "Save";
cSave.onclick = function() {saveChange(id)};

answered Jun 23, 2014 at 3:30

AnjumSKhan

9,8471 gold badge30 silver badges39 bronze badges

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

3 Comments

MMM Over a year ago

Anjum, the text has changed but the function () {saveChange(id)} does not work upon clicking it again.

AnjumSKhan Over a year ago

cSave.setAttribute("onclick","javascript:saveChange(id);");

MMM Over a year ago

Oh my bad, was posting to a wrong .jsp, anyhow thanks, it work :)

Roko C. Buljan · Accepted Answer · 2014-06-23 03:39:16Z

1

Wrap the ID in quotes (unless it's a variable name):

document.getElementById("editBtn");

in jQuery it would be between this lines:

var mcId = 'bla';

function saveChange(){
  alert( mcId );
}


$(function () { // DOM ready shorthand


   $("#editBtn").click(function(){
      $(this).replaceWith("<button id='saveBtn'>Save</button>");
   });

  // Than, for your dynamically generated element use:

  $('#parent').on('click', "#saveBtn", function(){
     saveChange( mcId );
  });

});

jsBin demo

note that I used for static element reference a non-dynamic #parent. You should do the same (to prevent bonding to $(document) as it's quite expensive to listen to events all the way up the DOM).

jQuery .on() with event delegation for dynamically generated elements

edited Jun 23, 2014 at 3:39

answered Jun 23, 2014 at 3:28

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

Replacing html button with jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related