Create Button in CRM 2013/2015 Form without a Field using Javascript

Sometimes, we need to create a Button in CRM Form and we try to convert a field to button, which you need extra field just for it.

Here is the code how to create button in CRM Form using Javascript without a field

function createButton(id, defaultText, intWidth, onClickEventFunctionName) {
    //debugger;
    var btn = document.createElement("BUTTON");        

    // Create a <button> element, you can also use input,but need to set type to button
    var t = document.createTextNode(defaultText);
    btn.appendChild(t);
    btn.className = "ms-crm-Button";
    btn.id = id;

    if (intWidth != null) {
        btn.style.width = intWidth + "px";
    }
    else {
        //defaulted width
        btn.style.width = "100%";
    }

    btn.onmouseover = onCRMBtnMouseHover; 
    btn.onmouseout = onCRMBtnMouseOut;

    btn.onclick = onClickEventFunctionName;

    return btn;
}

//use this for creating a button with hovering style like CRM has
function onCRMBtnMouseHover() {

    Mscrm.ButtonUtils.hoverOn(this);
}

function onCRMBtnMouseOut() {

    Mscrm.ButtonUtils.hoverOff(this)
}

And this is how to call it.

function createButtonCalculate() {
    var btnTemplate = createButton("btnCalculateCourseFeePerHour", "Calculate", 100, btnCalculate_onClick);

//put this code if you want to insert the button just after a field, 
    var insertAfterField = document.getElementById('fieldname_d');
    insertAfterField.parentElement.insertBefore(btnTemplate, insertAfterField.nextSibling);

//if you want to put after a grid, section, or another element it is possible also/
//remember it is using DOM method
//if you want to put before an element, just use this (without nextSibling
//insertAfterField.parentElement.insertBefore(btnTemplate, insertAfterField);
    
}

And of course for a button, you want to put onclick event, right?

function btnCalculate_onClick() {
    //put your logic here
    alert("clicked!");
}

Combine all code together and here is your result!



This is when you hover it…



And of course it is clickable…And will execute your onClick event function.

Hope this helps!

Thanks.