title: Custom OCI website: Submitting FORM using jquery
body: <p>I've created a simple HTML website to consume an Odata service.</p>
  
  <p>Basically, System A calls website and loads data from system B. When user clicks on button, submit data back to system A. This is for my OCI catalog functionality in IW32.</p>
  
  <p>I dont know what the HOOK URL should be or how to post the data back to System A.</p>
  
  <p>Am I missing anything?</p>
  
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link href="Style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="Component.js"&gt;&lt;/script&gt;
  
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Data from BPS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Materials from BPS&lt;/p&gt;
  
          Material:&lt;input type="text" name="iMat" id="iMat"&gt;&lt;br&gt;&lt;br&gt;
          Material Type:&lt;input type="text" name="iMatType" id="iMatType"&gt;&lt;br&gt;&lt;br&gt;
          Material Description:&lt;input type="text" name="iMatDesc"  id="iMatDesc"&gt;&lt;br&gt;&lt;br&gt;
  &lt;!--         &lt;input type="button" id="btnSubmit" name="storeSAP" value="Transfer to SAP"/&gt; --&gt;
  
  &lt;form id="form" name="frmbasket" action="http://example.com?sap-client=800?&amp;HOOK_URL=SAPEVENT:POST"
              method="post" target="_top"&gt;
  &lt;input type="button" id="button" value="Submit"&gt;
      &lt;table id=table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Material&lt;/th&gt;
                  &lt;th&gt;MaterialType&lt;/th&gt;
                  &lt;th&gt;MaterialDesc&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;input type="hidden" name="NEW_ITEM-DESCRIPTION[1]" id="iMatDesc"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-MATNR[1]" id="iMat"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-MATGROUP[1]" value = ""&gt; 
              &lt;input type="hidden" name="NEW_ITEM-QUANTITY[1]" value = "1"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-UNIT[1]" value = "EA"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-PRICE[1]" value = "71.85"&gt;
              &lt;input type="hidden" name="NEW_ITEM-PRICEUNIT[1]" value = "5"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-CURRENCY[1]" value = "USD"&gt;
              &lt;input type="hidden" name="NEW_ITEM-LEADTIME[1]" value = "1"&gt; 
              &lt;input type="hidden" name="NEW_ITEM-VENDOR[1]" value = ""&gt; 
              &lt;input type="hidden" name="NEW_ITEM-VENDORMAT[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-MANUFACTCODE[1]" value = ""&gt; 
              &lt;input type="hidden" name="NEW_ITEM-MANUFACTMAT[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-CONTRACT[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-CONTRACT_ITEM[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-SERVICE[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-EXT_QUOTE_ID[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-EXT_QUOTE_ITEM[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-EXT_PRODUCT_ID[1]" value = ""&gt;
              &lt;input type="hidden" name="NEW_ITEM-LONGTEXT_1:132[1]" value = "longtext_1: Test Text"&gt;
              &lt;input type="hidden" name="NEW_ITEM-CUST_FIELD1[1]" value = "custf 1.1"&gt;
              &lt;input type="hidden" name="NEW_ITEM-CUST_FIELD2[1]" value = "custf 1.2"&gt;
              &lt;input type="hidden" name="NEW_ITEM-CUST_FIELD3[1]" value = "custf 1.3"&gt;
              &lt;input type="hidden" name="NEW_ITEM-CUST_FIELD4[1]" value = "custf 1.4"&gt;
              &lt;input type="hidden" name="NEW_ITEM-CUST_FIELD5[1]" value = "custf 1.5"&gt;
              &lt;input type="hidden" name="NEW_ITEM-SORTF[1]" id="iMat"&gt; 
  
              &lt;/td&gt;
          &lt;/tr&gt;       
          &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/form&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the Component.js which I've code the scripts for it</p>
  
  <pre><code>$(document)
          .ready(
                  function() {
                      var query = "example.com" // root
                      // uri
                              + "?$format=json"; // give me json
                      // + "&amp;$callback=callback"; //this is my callback
  
                      $.ajax({
                          type: "GET",
                          dataType : 'json',
                          url : query,
                          // jsonpCallback : 'callback',
                           username: sUsername,
                           password: sPassword,
                           contentType: "application/json",
                           success : callback,
                           error: function (xhr) { //Add these parameters to display the required response
                               alert(xhr.status);
                               alert(xhr.statusText);
                           },
                      });
                      function callback(result) {
                          var html = '';
                          // var shows = result.d;
                          // $('#dsListTemplate').tmpl(shows).appendTo('#ds_shows');
                          $.each(result.d.results, function(i, post) {
                              html += '&lt;tr&gt;';
                              html += '&lt;td&gt;' + post.Material + '&lt;/td&gt;';
                              html += '&lt;td&gt;' + post.MaterialType + '&lt;/td&gt;';
                              html += '&lt;td&gt;' + post.MaterialDesc + '&lt;/td&gt;';
                              html += '&lt;/tr&gt;';
                              $('table tbody').html(html);
                          });
                      }
                  });
  
  
  $(document).ready(function() {
      $("#table").on("click", "tr", function(event) {
          event.preventDefault();
          $('#table tr').removeClass('selected');
          $(this).addClass('selected');   
  
  
                   document.getElementById("iMat").value = this.cells[0].innerHTML;
                   document.getElementById("iMatType").value = this.cells[1].innerHTML;
                   document.getElementById("iMatDesc").value = this.cells[2].innerHTML;
  
  /*        event = event || window.event; //for IE8 backward compatibility
          var target = event.target || event.srcElement; //for IE8 backward compatibility
          while (target &amp;&amp; target.nodeName != 'tr') {
              target = target.parentElement;
          }
          //var cells = target.cells; //cells collection
          var cells = target.getElementsByTagName('td'); //alternative
          if (!cells.length || target.parentNode.nodeName == 'THEAD') { // if clicked row is within thead
              return;
          }
          var f1 = document.getElementById('Material');
          var f2 = document.getElementById('MaterialType');
          var f3 = document.getElementById('MaterialDesc');
          f1.value = cells[0].innerHTML;
          f2.value = cells[1].innerHTML;
          f3.value = cells[2].innerHTML;  */  
      });
  
  });
  
  
  $(document).ready(function(){
      $( "#button" ).click(function() {
          $( "#form" ).submit();
      });
  });
  
  
  /*$(document).ready(function() {
      $("#btnSubmit").click(function() {
  
          var a=$("#form").serialize();
  
                  $.ajax({
                      type: "POST",
                      url: "http://example.com:8000/sap/bc/ui5_ui5/sap/XXXXXX/index.html?sap-client=800?&amp;HOOK_URL=SAPEVENT:POST",
                      data: a, 
                      success: function (data) {
                          alert(data); 
                      }
                  });     
              });
  });
  */
  </code></pre>
  
  <p>So when the clicks Submit button, I'm supposed to transfer those NEW-FIELDS back to SAP system at IW32(Component tab)</p>
  
  <p>Any advice?</p>