Form Button to some API

Developers
1

Hello,

I wanted to extend the example from Embedded Forms Camunda. How can I add a button to the html that reads the content of the fields and submits it to some api?

I tried this:

<div id="form-container">
  <form role="form" name="form">
    <div class="form-group">
      <label for="customerId-field">Customer ID</label>
      <input required cam-variable-name="customerId" cam-variable-type="String" class="form-control" id="customerId" />
    </div>
    <div class="form-group">
      <label for="amount-field">Amount</label>
      <input cam-variable-name="amount" cam-variable-type="Double" class="form-control" id="amount" />
    </div>
  <button id="submitButton" type="button">Submit</button>
  </form>
</div>

<script>
  // Function to handle the form submission
  function submitForm() {
    // Get the value of the customerId field
    var customerId = document.getElementById("customerId").value;

    // Define the URL to send the request to
    var apiUrl = "https://example.com/api"; // Replace with your actual API URL

    // Create an XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Configure the request
    xhr.open("POST", apiUrl, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    // Define the data to send (you can customize this as needed)
    var data = {
      customerId: customerId,
      amount: parseFloat(document.getElementById("amount").value)
    };

    // Convert the data to JSON format
    var jsonData = JSON.stringify(data);

    // Set up a callback function to handle the response
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // Request was successful
          console.log("Request successful");
          // You can handle the response here
        } else {
          // Request failed
          console.error("Request failed with status: " + xhr.status);
          // You can handle the error here
        }
      }
    };

    // Send the request
    xhr.send(jsonData);
  }

  // Add an event listener to the submit button
  document.getElementById("submitButton").addEventListener("click", submitForm);
</script>

However I get the error: Cannot read properties of undefined (reading ‘assignee’)

This is my xml:

xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="14.0.0" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="true">
    <bpmn2:startEvent id="StartEvent_1">
      <bpmn2:outgoing>Flow_1bg6m23</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:sequenceFlow id="Flow_1bg6m23" sourceRef="StartEvent_1" targetRef="Activity_1l5pqy2" />
    <bpmn2:endEvent id="Event_0nfofj7">
      <bpmn2:incoming>Flow_13xnv1l</bpmn2:incoming>
    </bpmn2:endEvent>
    <bpmn2:sequenceFlow id="Flow_13xnv1l" sourceRef="Activity_1l5pqy2" targetRef="Event_0nfofj7" />
    <bpmn2:userTask id="Activity_1l5pqy2" camunda:formKey="embedded:deployment:sampleEmbeddedForm.html" camunda:assignee="demo">
      <bpmn2:incoming>Flow_1bg6m23</bpmn2:incoming>
      <bpmn2:outgoing>Flow_13xnv1l</bpmn2:outgoing>
    </bpmn2:userTask>
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="152" y="100" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0nfofj7_di" bpmnElement="Event_0nfofj7">
        <dc:Bounds x="392" y="100" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1likfkj_di" bpmnElement="Activity_1l5pqy2">
        <dc:Bounds x="240" y="78" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1bg6m23_di" bpmnElement="Flow_1bg6m23">
        <di:waypoint x="188" y="118" />
        <di:waypoint x="240" y="118" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_13xnv1l_di" bpmnElement="Flow_13xnv1l">
        <di:waypoint x="340" y="118" />
        <di:waypoint x="392" y="118" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>