HTML send form to API in JSON

marcb4 0
Viewed 32

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\""
}
ansible-awx json javascript html
1 Answers

I used fetch and it works:

...
        <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>
...
        <script>
            var extra_var_form = document.getElementById('extra_vars_form')

            extra_var_form.addEventListener('submit', function (e) {
                e.preventDefault()
                
                var user = "user_x"
                var password = "XXX"
                var extra_vars_area = document.getElementById('extra_vars_area').value

                fetch('https://xxx/api/v2/job_templates/25/', {
                    method: 'PATCH',
                    contentType: 'application/json;',
                    body: JSON.stringify(
                        {"extra_vars": extra_vars_area}
                    ),
                    headers: {
                        'Authorization': 'Basic ' + btoa(user + ":" + password),
                        'Content-type': 'application/json; charset=UTF-8'
                    }
                })
            });
        </script>
marcb40
Related