How can I add a Custom button to a Custom Visualforce page?

Question

I have created a custom button that runs JavaScript to update a long text area field in my Opportunity object. This works fine when the custome button is added to the standard Opportunity Page Layout.

{!REQUIRESCRIPT("/soap/ajax/29.0/connection.js")}

var note = prompt("Add Note", "");
if (note != null) {
var project = new sforce.SObject("Opportunity");
project.id = "{!Opportunity.Id}";

var date = "{!TODAY()}";
// var user = "{!$User.Alias}";
var user = "{!$User.CommunityNickname}";
var oldnote = "{!JSENCODE(Opportunity.Description)}";
var prepend = date+" "+user+" - "+note+"\n";
var newnote = prepend+oldnote;

project.Description = newnote;

var result = sforce.connection.update([project]);
window.location.reload();
}

I would like to use a custom visualforce page to display the note field to be updated along with the button to trigger the update script. How can I get the button on this page to act the same as the custom button created for the standard layout?

<apex:page standardController="Opportunity" showHeader="false" sidebar="false">
    <apex:form> 
        <apex:pageBlock>
            <apex:pageBlockSection columns="3">
                <apex:outputField label = "Description" value = "{! Opportunity.Description}" />
                <apex:commandButton action="{!Save}" value="Add Note" /> 
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>  
</apex:page>

Answer 1

You can call your method on button click as shown below

<apex:page standardController="Opportunity" showHeader="false" sidebar="false">
<script>
{!REQUIRESCRIPT("/soap/ajax/29.0/connection.js")}

{!REQUIRESCRIPT("/soap/ajax/29.0/connection.js")}
//This is your javascript
function SaveNote()
{
    var note = document.getElementById('frmid:pgblk:pgblksection:descriptionfield').value;
    if (note != null) {
    var project = new sforce.SObject("Opportunity");
    project.id = "{!Opportunity.Id}";

    var date = "{!TODAY()}";
    // var user = "{!$User.Alias}";
    var user = "{!$User.CommunityNickname}";
    var oldnote = "{!JSENCODE(Opportunity.Description)}";
    var prepend = date+" "+user+" - "+note+"\n";
    var newnote = prepend+oldnote;

    project.Description = newnote;

    var result = sforce.connection.update([project]);
    window.location.reload();
    return false;
    }

}

</script>
<apex:form id="frmid"> 
    <apex:pageBlock id="pgblk">
        <apex:pageBlockSection columns="3" id="pgblksection">
            <apex:inputfield id="descriptionfield" value = "{! Opportunity.Description}" />
            <apex:commandButton onclick="return SaveNote();" value="Add Note" /> 
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>  

Answer 2

Try something like this. I don't know what your button name is, but I have a custom button that does some page updates on Leads with a similar entry.

<apex:commandbutton action="{!URLFOR($Action.Opportunity.[ButtonName],Opportunity.id)}" value="[ButtonName]"}"/>

---

Edit

Here is the VF Page that I have with a custom button. This VF page was added to the standard page layout as a component. I have it set so that only the System Administrators can see it.

<apex:page standardcontroller="Lead">
    <apex:form >
        <apex:commandbutton action="{!URLFOR($Action.Lead.Convert_to_Opportunity,Lead.id)}" value="Convert to Opportunity" rendered="{!$Profile.Name='System Administrator'}"/>
    </apex:form>
</apex:page>

Here is a little background on our use of this, in case you are curious.

For us, this button creates an Opportunity, links it to an Account and Contact that matches the Lead, then deletes the lead. I use Leads as a temporary repository for upcoming contracts. Leads are created as accounts approach contracts. This allows our sales rep to look at it and update it before the Opportunity is created. After so many days, the Opportunity is created, any changes to the lead updates the linked account and Contact, and any tasks/events are transferred to the Contact & new Opportunity. After that, this temporary lead object is deleted. Normally, this creation & deletion process is automatic, based on how long the record exists. However, every now and then, we need to move a lead to an Opportunity early. So, System Admins are able to do that, which prevents the accidental deletion of real leads that should use the standard Convert button.