Thursday, October 23, 2014

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>