title: HTML form to Javascript to create JIRA issue via REST API issues
body: <p>having issues with the javascript in this form to send issues via the REST API. I've got the JSON formatting correctly in the part that makes the API call (i confirmed by posting directly via Postman and the authentication/post works). I just can't figure out whats going on in the script that's failing and not creating the JIRA issue. I'm trying to get this work in our Confluence page but havent had luck there or in another internal wiki tool that we have. </p>
  
  <p>This is my form with javascript:</p>
  
  <pre><code> &lt;form id="rendered-form"&gt;
          &lt;div class="rendered-form"&gt;
              &lt;div class="fb-text form-group field-summary"&gt;
                  &lt;label for="jirausername" class="fb-text-label"&gt;JIRA Username&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" class="fe_c_text-input__input" name="jirausername" id="jirausername" required="required"  size="25"&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-text form-group field-summary"&gt;
                  &lt;label for="jirapassword" class="fb-text-label"&gt;JIRA Password&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;input type="password" class="fe_c_text-input__input" name="jirapassword" id="jirapassword" required="required"  size="25"&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-select form-group field-requestype"&gt;
                  &lt;label for="requestype" class="fb-select-label"&gt;Please help us categorize your request&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;select class="fe_u_margin--large" name="requestype" id="requestype" required="required" &gt;
                      &lt;option disabled="null" selected="null"&gt; - Select - &lt;/option&gt;
                      &lt;option value="Product:Improvement:Request" id="requestype-0"&gt;General Product Enhancement Request (Clinicals, Collector, Coordinator, Communicator)&lt;/option&gt;
                      &lt;option value="ISTOOLS" id="requestype-1"&gt;Updates to IS Tools (Weblog, Builder Tool, IEMQ, etc.)&lt;/option&gt;
                      &lt;option value="LIBRARY:PARAMETER" id="requestype-2"&gt;Library/Parameter Updates&lt;/option&gt;
                      &lt;option value="FEASIBILITY:VALUE:STUDY" id="requestype-3"&gt;Feasibility/Value Study for Initiative&lt;/option&gt;
                      &lt;option value="DOCUMENTATION" id="requestype-4"&gt;Documentation Updates/Review&lt;/option&gt;
                      &lt;option value="SF" id="requestype-5"&gt;Salesforce Enhancements&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-select form-group field-interfacetype"&gt;
                  &lt;label for="interfacetype" class="fb-select-label"&gt;Interface Type&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;span class="tooltip-element" tooltip="Select the interface type for which the request is being submitted."&gt;?&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;select class="fe_u_margin--large" name="interfacetype" id="interfacetype" required="required" &gt;
                      &lt;option disabled="null" selected="null"&gt;- Select -&lt;/option&gt;
                      &lt;option value="Registries" id="interfacetype-0"&gt;Registries(Specialized, vaccine, Cancer)&lt;/option&gt;
                      &lt;option value="Collector" id="interfacetype-1"&gt;Collector (Emrfull, Bi-directional, Outbound charge)&lt;/option&gt;
                      &lt;option value="Clinicals" id="interfacetype-2"&gt;Clinicals (Orders &amp;amp; Results)&lt;/option&gt;
                      &lt;option value="Surescripts" id="interfacetype-3"&gt;Surescripts&lt;/option&gt;
                      &lt;option value="Direct" id="interfacetype-4"&gt;Direct&lt;/option&gt;
                      &lt;option value="CHL7" id="interfacetype-5"&gt;CHL7&lt;/option&gt;
                      &lt;option value="PIX:PDQ" id="interfacetype-6"&gt;PIX/PDQ&lt;/option&gt;
                      &lt;option value="XDS" id="interfacetype-7"&gt;XDS (PNR &amp;amp; QNR)&lt;/option&gt;
                      &lt;option value="Reports" id="interfacetype-8"&gt;Reports (Custom reports, DWF)&lt;/option&gt;
                      &lt;option value="HPDE" id="interfacetype-9"&gt;HPDE&lt;/option&gt;
                      &lt;option value="Hospital" id="interfacetype-10"&gt;Hospital (ADT, Orders &amp;amp; Results, Vaccine)&lt;/option&gt;
                      &lt;option value="Custom:Interfaces" id="interfacetype-11"&gt;Custom Interfaces&lt;/option&gt;
                      &lt;option value="Other" id="interfacetype-12"&gt;Other or N/A&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-text form-group field-summary"&gt;
                  &lt;label for="summary" class="fb-text-label"&gt;Summary&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" class="fe_c_text-input__input" name="summary" id="summary" required="required"  size="75"&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-textarea form-group field-description"&gt;
                  &lt;label for="description" class="fb-textarea-label"&gt;Description&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;textarea type="textarea" class="fe_c_textarea--autosize" name="description" id="description" required="required"  rows = "5" cols="55"&gt;&lt;/textarea&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-text form-group field-summary"&gt;
                  &lt;label for="parentJIRA" class="fb-text-label"&gt;Reference JIRA Task&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" class="fe_c_text-input__input" name="parentJIRA" id="parentJIRA"  size="10"&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-select form-group field-initiatives"&gt;
                  &lt;label for="interfacetype" class="fb-select-label"&gt;Select the Integration Services 2018 initiative that best applies to your request&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;select class="fe_u_margin--large" name="initiatives" id="initiatives"" required="required" &gt;
                      &lt;option disabled="null" selected="null"&gt;- Select -&lt;/option&gt;
                      &lt;option value="20712" id="interfacetype-0"&gt;Easy Switch&lt;/option&gt;
                      &lt;option value="20711" id="interfacetype-1"&gt;Deepen Coordinator Core Services&lt;/option&gt;
                      &lt;option value="20710" id="interfacetype-2"&gt;Improve Health System Integration/Prevent the Box Out&lt;/option&gt;
                      &lt;option value="20709" id="interfacetype-3"&gt;Increase Customer Cost Savings/Reduce Client Work&lt;/option&gt;
                      &lt;option value="20708" id="interfacetype-4"&gt;Data Migrations&lt;/option&gt;
                      &lt;option value="20713" id="interfacetype-5"&gt;Deliver broad clinical value (ROI) through Health System Integration&lt;/option&gt;
                      &lt;option value="20714" id="interfacetype-6"&gt;IS Platform 2.0&lt;/option&gt;
                      &lt;option value="20715" id="interfacetype-7"&gt;Reduce time and cost of interface delivery&lt;/option&gt;
                      &lt;option value="20716" id="interfacetype-8"&gt;Drive evidence-based integration practices&lt;/option&gt;
                      &lt;option value="20717" id="interfacetype-9"&gt;Service Integrity&lt;/option&gt;
                      &lt;option value="20718" id="interfacetype-10"&gt;This is not directly related to an IS initiative&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="fb-select form-group field-team"&gt;
                  &lt;label for="team" class="fb-select-label"&gt;What org are you a part of?&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;select class="fe_u_margin--large" name="team" id="team" required="required" &gt;
                      &lt;option disabled="null" selected="null"&gt;- Select -&lt;/option&gt;
                      &lt;option value="IntegrationDesign" id="team-0"&gt;Integration Design&lt;/option&gt;
                      &lt;option value="Build" id="team-1"&gt;Integration Engineering (Build)&lt;/option&gt;
                      &lt;option value="TPM" id="team-2"&gt;Technical Project Management&lt;/option&gt;
                      &lt;option value="SEO" id="team-3"&gt;Service Excellence and Optimization&lt;/option&gt;
                      &lt;option value="Product" id="team-4"&gt;Product Management&lt;/option&gt;
                      &lt;option value="Dev" id="team-5"&gt;R&amp;amp;D&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;&lt;br&gt;
              &lt;div class="fb-radio-group form-group field-clientgolive"&gt;
                  &lt;label for="clientgolive" class="fb-radio-group-label"&gt;Is this related to a client go-live?&lt;span class="fb-required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br&gt;
                  &lt;div class="radio-group"&gt;&lt;div class="radio"&gt;
                      &lt;input class="fe_u_margin--large" name="clientgolive" id="clientgolive-0" required="required"  value="GOLIVE:Y" type="radio"&gt;&lt;label for="clientgolive-0"&gt;Yes&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="radio"&gt;
                      &lt;input class="fe_u_margin--large" name="clientgolive" id="clientgolive-1" required="required"  value="GOLIVE:N" type="radio"&gt;&lt;label for="clientgolive-1"&gt;No&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="fb-button form-group field-submit"&gt;
                  &lt;button type="submit" class="fe_c_button--primary btn btn-success" name="submit" style="success" id="submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;script&gt; 
                      document.getElementById('submit').addEventListener('click', function() {
                              Validate2(); 
                              Generate1();
                          });
  
                      function Validate2(){
                      var alertmessagestr = '';
  
                      if(cleanInput(document.getElementById('initiatives').value) == null || cleanInput(document.getElementById('initiatives').value) == ''){
                          alertmessagestr += "Please select at least one initiative or "Other" option.\\n";
                      }
  
                      if (document.getElementById('JIRAPASSWORD').value == null || document.getElementById('JIRAPASSWORD').value == '') {
                          alertmessagestr += "Please enter the Jira password\\n";
                      }
                      }
                      if (alertmessagestr != '') {
                          alert (alertmessagestr);
                          return false;
                      }
                      else {
                          return true;
                      };
                  function Generate1(){
  
                  var valid = Validate2();
                  if (!Boolean(valid)) {
                      jQuery('#GENERATE').attr("disabled", false);
                      return false;
                  }
  
                  var jira_requesttype = document.getElementById('requestype').value;
                  var jira_interfacetype = document.getElementById('interfacetype').value;
                  var jira_summary = document.getElementById('summary').value;
                  var jira_description = '*Description*' + '\\n' + document.getElementById('description').value + '\\n\\n';
                  var jira_initiatives = document.getElementById('initiatives').value;
                  var jira_team = document.getElementById('team').value;
                  var jira_clientgolive = document.getElementById('clientgolive').value;
                  var jira_parent = document.getElementById('parentJIRA').value;
                  var jira_username = document.getElementById('jirausername').value;
                  //var jira_username = public ConfluenceUser getUserByName(String);
                  var jira_password = document.getElementById('jirapassword').value;
  
  
      //
      // Assign variable to your instance JIRA API URL
      //
        var url = "https://&lt;YOUR_JIRA_INSTANCE&gt;.atlassian.net/rest/api/2/issue?key=110011";
      //
      // The POST data for the JIRA API call
      //
  
        var login = 
        [{
          "username:" + jira_username + ","+ "password:" + jira_password
        }
        ];
          return btoa(encodeURIComponent(login).replace(/%([0-9A-F]{2})/g,
              function toSolidBytes(match, p1) {
                  return login.fromCharCode('0x' + p1);
          }));
  
  
  
        var data = 
      {
          "fields": {
             "project":{ 
                "key": "110011"
             },
            "labels": [ jira_requesttype + ", " + jira_interfacetype + ", " +  jira_team + "," + jira_clientgolive ],   
            "summary": jira_summary,
            "description": jira_description,
            "components": {
              "id": [jira_initiatives] 
            },
      //
      // The following custom fields are for the various strings and are simple text fields in JIRA
  
      // All tickets are categorised as Tasks, and are not changed by the form submission.
      //
            "issuetype":{
                "name": "Task"
             }
         }
      };
  
      //
      // Turn all the post data into a JSON string to be send to the API
      //
        var payload = JSON.stringify(data);
        var headerload = JSON.stringify(login);
      //
      // POST header information, including authorization information.  
      // This API call is linked to an account in JIRA, and follows the Basic Authentication method ("username:password" are Base64 encoded)
      //
        var headers = 
            { 
              "content-type": "application/json",
              "Accept": "application/json",
              "Cache-Control": "no-cache",
              "authorization": "Basic " + headerload
              //"authorization": "Basic xxxx" 
  
            };
  
      //
      // A final few options to complete the JSON string
      //
        var options = 
            { 
              "async": true,
              "crossDomain": true,
              "content-type": "application/json",
              "method": "POST",
              "headers": headers,
              "payload": payload
            };  
  
      //
      // Make the HTTP call to the JIRA API
      //
        //var response = UrlFetchApp.fetch(url, options);
        //Logger.log(response.getContentText());
        var response = $.ajax(options).done(function(response){console.log(response);});
      //
      // Parse the JSON response to use the Issue Key returned by the API in the email
      //
        var dataAll = JSON.parse(response.getContentText());
        var issueKey = dataAll.key
        Logger.log(dataAll)
  
      // $.ajax(settings).done(function (response) {
      //   console.log(response);
      //})
  
       var resource = Resource('https://&lt;YOUR_JIRA_INSTANCE&gt;.atlassian.net/rest/api/2/issue/%s' % key, pool_instance=None, filters=[auth])
       var response = resource.get(headers = {'Content-Type' : 'application/json'})
          if response.status_int == 200:
              # Not all resources will return 200 on success. There are other success status codes. Like 204. We've read
              # the documentation though and know what to expect here.
              issue = json.loads(response.body_string())
              return issue;
          document.getElementByName(issue).innerHTML 
  
      }
  
              &lt;/script&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>Any help would be great. I'm pretty sure that it has something to do with the javascript function being called, as I've tried removing the entire form and hardcoding the API call with set data fields to be submitted with the button click with no luck. I'm not a developer but was asked for a proof of concept, and am struggling. I'm not getting any error messages on the page so I've been shooting in the dark with troubleshooting. </p>
  
  <p>Here's the barebones API call with button that isnt working either:</p>
  
  <pre><code>&lt;div class="fb-button form-group field-submit"&gt;
        &lt;button type="submit" class="fe_c_button--primary btn btn-success" value="click" name="testAPI" style="success" id="submit" onclick="createIssue();"&gt;Test API&lt;/button&gt;
  
    &lt;script&gt;
  function createIssue(){
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://&lt;myjira&gt;.atlassian.net/rest/api/2/issue?key=110011",
    "method": "POST",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json",
      "Authorization": "Basic xxx",
      "Cache-Control": "no-cache"
    },
    "processData": false,
    "data": "{\n    \"fields\": {\n       \"project\":\n       { \n          \"id\": \"20029\"\n       },\n       \"summary\": \"2 No REST for the Wicked.\",\n       \"description\": \"Creating of an issue using IDs for projects and issue types using the REST API\",\n       \"issuetype\": {\n          \"name\": \"Task\"\n       },\n       \"labels\" : [\"DIRECT\",\"Library:Parameter:Updates\",\"Product:Management\"], \n       \"components\": [{ \n       \t\t\"id\":\"20717\"\n       }]\n   }\n}"
  }
  }
  document.getElementById('submit').addEventListener('click', createIssue());
  
  
  $.ajax(settings).done(function (response) {
     console.log(response);
   })
  ;
    &lt;/script&gt;
    &lt;/div&gt;
  </code></pre>