HTML send form to API in JSON

Question

I'm having problems to use a textarea in html and send input data to an API that needs json. I want to update the vars for a job in my AWX Operator API (Ansible).

So everything that I write in this textarea should be send to the API as value for extra_vars.

My html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Variables in AWX API</title>
</head>
  <body>
    <script src="get.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="post.js"></script>
    <h2>current config</h2>
    <!-- from get.js -->
    <div id="vars"></div>
    <br>
    <form id="extra_vars_form">
      <textarea type="text" name="extra_vars_area" id="extra_vars_area"></textarea>
      <input type="submit" name="extra_vars_submit" id="extra_vars_submit" />              
    </form>
</body>
</html>

post.js

var user = "admin"
var password = "XXX"

$(document).ready(function () {
    var foo = $("#foo");
    
    foo.submit(function (e) {
      e.preventDefault();
      
      var jsonData = {
        "extra_vars_area":$("#extra_vars_area").val()
      };
      
      $.ajax({
        url : 'https://xxxx/api/v2/job_templates/25/',
        dataType : 'json',
        contentType : 'application/json;',
        data : jsonData,
        type : 'POST',
        headers: {
            "Authorization": "Basic" + btoa(user + ":" + password)
        },
        success : function (){
            alert('Done')
        },
        complete : handleData

      });
      
      function handleData(data) {
        console.log(data);
        // do whatever with response data
      }
    });
  });

I am definetely no HTML/js expert so most of the stuff is googled and put together from somewhere else.

Current output from GET (yes json outputs the value as yml :D)

{
  ...
  extra_vars: "---\nversion_of_something: \"1.x.x\""
}

Write this into textarea and POST it to API:

---\nversion_of_something: \"2.x.x\"

Have this as output for the next GET

{
  ...
  extra_vars: "---\nversion_of_something: \"2.x.x\""
}

you should encode the variable "jsonData" to actual json, look at [this](https://stackoverflow.com/questions/6323338/jquery-ajax-posting-json-to-webservice) answer how it's done — Margon, Sep 16 '22 at 15:05
@Margon so what I did is: `var jsonData = {"extra_vars": "---\nversion: \"2.x.x\""}` (hardcoded to debug) and `data : JSON.stringify({ jsonData }),` but that doesnt seem to work. What am I doing wrong here? — marcb4, Sep 19 '22 at 08:07

marcb4 · Accepted Answer · 2022-09-26T09:00:05.017

I used fetch and it works:

Create form and button:

...
        <form id="extra_vars_form">
            <textarea type="text" name="extra_vars_area" id="extra_vars_area"></textarea><br>
            <input type="submit" name="extra_vars_submit" id="extra_vars_submit" value="Update Template" />
        </form>
...

Use JavaScript inside index.html:

...
        <script>
    <!--Change extra_vars_form with your form id-->
            var extra_var_form = document.getElementById('extra_vars_form')

            extra_var_form.addEventListener('submit', function (e) {
                e.preventDefault()
    <!--Edit vars if Authorization is required-->
                var user = "user_x"
                var password = "XXX"
    <!--Change extra_vars_area with your textarea or text input id-->
                var extra_vars_area = document.getElementById('extra_vars_area').value
    <!--Use your URL-->
                fetch('https://xxx/api/v2/job_templates/25/', {
                    method: 'PATCH',
                    contentType: 'application/json;',
    <!--It will now convert your string to JSON-->
    <!--Change extra_vars to your desired Key thats in your JSON and change extra_vars_area to your textarea/input text-->
                    body: JSON.stringify(
                        {"extra_vars": extra_vars_area}
                    ),
                    headers: {
                        'Authorization': 'Basic ' + btoa(user + ":" + password),
                        'Content-type': 'application/json; charset=UTF-8'
                    }
                })
            });
        </script>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 22 '22 at 23:33

HTML send form to API in JSON

1 Answers1