function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Subhasini Bhosal 10Subhasini Bhosal 10 

How to call REST service from VF page written in HTML and Javascript on click of a button?

I have REST Service to create a Case in Salesforce:

@RestResource(urlMapping='/Case/*')

global with sharing class CaseCreater {
 @HttpGet
    global static Case getCaseById() {
        RestRequest req = RestContext.request;        
        String caseId = req.requestURI.substring(
                                  req.requestURI.lastIndexOf('/')+1);
        Case result = 
                       [SELECT  Status,Origin from Case where  Id = :caseId];
        return result;
    }
    @HttpPost
    global static String createCase(String priority,String type, String status,
        String origin,String reason, String subject, String description ) {
        Case c = new Case(
         
            Priority=priority,
            Type= type,            
            Status=status,
            Origin=origin,
            Reason=reason,
            Subject=subject,
            Description=description          
                         );
        insert c;
        return c.Id;
    }
}
//SELECT  Status,Origin,priority,Product__c,Type,Reason,
//Subject,Description,account.name,case.contact.name from Case where status='New'

----

I want to call this service from visualforce page written in HTML and Javascript on click of a button to create a case:

<apex:page sidebar="false" showHeader="false"  standardController="Case" extensions="abc">
    <h1> Welcome {!$User.FirstName}!!</h1>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
    </head>
   
<form id="form1" method="POST">
  Priority:
  <input type="text" name="priority" id="priority"></input><br></br>
  Type:
  <input type="text" name="type" id="type"></input><br></br>
   Status:
  <input type="text" name="status" id="status"></input><br></br>
   Origin:
  <input type="text" name="origin" id="origin"></input><br></br>
   Reason:
  <input type="text" name="reason" id="reason"></input><br></br>
   Subject:
  <input type="text" name="subject" id="subject"></input><br></br>
   Description :
  <input type="text" name="description" id="description"></input><br></br>
    <button type="button" onclick="callme();">Create Case</button>
    
    </form>
    <script>    
   
        
       function callme(){ 
      
   var data={
    "priority":document.getElementById("priority").value,
    "type":document.getElementById("type").value,
    "status":document.getElementById("status").value,
    "origin":document.getElementById("origin").value,
    "reason":document.getElementById("reason").value,
    "subject":document.getElementById("subject").value,
    "description":document.getElementById("description").value
        };           
        
    console.log(result);
        }
    
    </script>
</html>

</apex:page>
----------------

I am not sure how to call the service on click of a button. Can someone please help?