Onclick event change button name and js funtion accordingly

**deepman** · 09-12-2012, 01:31 AM

Hello everyone.

I have 2 buttons named "Add" & "Edit" respectively. The thing that i have to do is that when I click on "Add" the name of "Edit" change to "Display" which on click eventually call a JavaScript function Display() but when "Add" is not click ,"Edit" remain same but which call the function Edit(). Can you please guide me on how to do this.Thank you :-)

**N1tr0gen** · 09-12-2012, 01:54 PM

Something like this could work:

Code:

<script type="text/javascript">


function changeButton() {
	document.getElementById("changeling").name="Display";
	document.getElementById("changeling").value="Display";
	document.getElementById("changeling").onclick=function() { display() };

}

function edit() {
	alert("edit function");
}

function display() {
	alert("display function");
}


</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>test</TITLE>
</head>

<body>
	<form name="formName">
		<input type="button" name="Add" value="Add" onclick="changeButton();" >
		<br/>
		<input type="button" id="changeling" name="Edit" value="Edit" onclick="edit();" >
	</form>
</body>
</html>

**maurycy** · 09-12-2012, 05:47 PM

I believe it'll be better if you do something like that:

Default state:
[Add] [Edit] [Display:css display:none]

Click on Add
[Add] [Edit:css display:none] [Display]

that way you don;t have to change functions, values etc, just hide/show proper button

**deepman** · 09-13-2012, 11:45 PM

Thanks :-)

Thread: Onclick event change button name and js funtion accordingly

Thread Tools

Display

Onclick event change button name and js funtion accordingly

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions