Insert Records in Salesforce by using JavaScript

In this article I’ll demonstrate how to insert record in Salesforce object by using javascript, in VF page without any standard or custom controller or by apex class.

By using AJAX Toolkit we can do this task easily. There are two types of AJAX Toolkit one is synchronous and another one is asynchronous call.

Here is a simple example of data insert using Javascript in Visualforce page. In below example I’m using synchronous call.
These are the steps to insert data using Javascript:

  1. Connecting to the AJAX Toolkit(By using login methods or getting Session_ID).
  2. Embedding the API methods in JavaScript.
  3. Processing the results.

Sample Code:

<apex:page id="pg">
    <script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
	<script>
		function insertAcc(){

			// Getting Session ID.
			sforce.connection.sessionId = "{!$Api.Session_ID}";

			//Creating New Account Record.
			var account = new sforce.SObject("Account");

			//Getting Account Name from inputText.
			account.Name = document.getElementById("pg:frm:pb:pbs:pbsi:txtName").value;

			//Create method 
			var result = sforce.connection.create([account]);

			//Getting result 
			if (result[0].getBoolean("success")) {
				alert("New Account is created with id " + result[0].id);
			}
			else {
				alert("failed to create new Account " + result[0]);
			}
		}
	</script>
	<apex:form id="frm">
		<apex:pageBlock title="Insert Account" tabStyle="Account" id="pb">
			<apex:pageBlockSection title="Account Name" columns="1" id="pbs">
				<apex:pageBlockSectionItem id="pbsi">
					<apex:outputLabel value="Name" />
					<apex:inputText title="Name" id="txtName" />
				</apex:pageBlockSectionItem>
			</apex:pageBlockSection> 
			<apex:pageBlockButtons>
				<apex:commandButton onclick="return insertAcc();" value="Save"/>
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>