FAQ: Adding a button to a form
## Answer
Add a button in "[Script](/en/manual/table-management-script)".
---
## Overview
Use "[Script](/en/manual/table-management-script)" to add a button after Category A or to the command button area.
## Method of Operation
1. Open the target table and open "[Table Management](/en/manual/table-management)" from the "Management" menu.
2. Add Category A in the Editor tab.
1. Open the Script tab, click the "Create New" button, enter any title in "[Title](/en/manual/tenant-logo)", and enter the following script in "[Script](/en/manual/table-management-script)".
1. Set "Output Destination" appropriately.
1. Click the "Change" button to close the dialog.
1. Click the "Update" button at the bottom of the screen.
1. Open any record or create a new one.
## Sample Code
### 1. Add a button after Category A. The button design is the standard html button tag.
Set "Destination" to "New" or "Edit" (or both).
##### JavaScript
```
$p.events.on_editor_load = function () {
$('#' + $p.getField('ClassA')[0].id).after('<button type="button" style="float: left;">Button</button>');
};
```
### 2. Add a button to the command button area. The button design conforms to Pleasanter.
Set "Output Destination" to "New" or "Edit" (or both).
##### JavaScript
```
$p.events.on_editor_load = function () {
$('#MainCommands').append($('<button id=\"NewButton\">Button</button>').button({ icon: 'ui-icon-gear' }));
};
```
*If you set "Output Destination" to "List", change the event firing script to `$p.events.on_grid_load`. If you set "Calendar" or "Crosstab", change the event firing script to that of the screen on which it is set.
*Set the button icon in the "ui-icon-○○" format. For the specified string, see the following page.
[Icons \| jQuery UI API Documentation](https://api.jqueryui.com/theming/icons/)
## Related Information
<div id="ManualList"><ul><li><a href="/en/manual/table-management">Manage Table</a><span>10.02.2024 up</span></li></ul></article>
<ul><li><a href="/en/manual/table-management-script">Table Management: Script</a><span>08.13.2024 up</span></li></ul></article>
<ul><li><a href="/en/manual/tenant-logo">Tenant Ｍanagement Function: Logo, Title, Logo Image</a><span>10.08.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
