Add Custom Button in list form using jQuery

In this post I will explained how to add custom button in list form using jquery

Method 1:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input[value$='Save']").after($('<input id="btncustomsave" class="ms-ButtonHeightWidth" name="btncustomsave" type="button" value="Custom Save" onclick="JSMethod();" />')).hide();

    });

    function JSMethod() {

        alert('Hi');

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem").click();

    }

</script>

Method 2:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem ").hide();

        var submitHTML = '<td class="ms-separator">&nbsp;</td><td class="ms-toolbar" noWrap=""><input id="btncustomsave" class="ms-ButtonHeightWidth" name="btncustomsave" type="button" value="Custom Save" onclick="JSMethod();" /></td>';

        $(".ms-formtoolbar > tbody > tr").append(submitHTML);

    });

    function JSMethod() {

        alert('Hi');

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem ").click();

    }

</script>