How to insert HTML form input into API object array

Question

I have two code "snippets" that I would like to combine but I don't really know how to.

I've managed to make HTML form input into an JSON object. See codepen here.

When I click the "Add note" btn I want to grab the input values -> make them to an object -> POST them to my api object array. Image and code example below:

HTML to JSON

// CREATE NEW NOTES
var btn = document.getElementById('btn');

btn.addEventListener("click", function() {

var request = new XMLHttpRequest();

request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes');

request.setRequestHeader('Content-Type', 'application/json');

request.onload = function () {

    // When I click the "Add note" btn I want to grab the input values -> make them to an object -> POST them to my api object array.

    // Like

    // var body = {
    //  'title': form.title.value,
    //  'description': form.description.value
    // }

};

request.send(JSON.stringify(body));

});

This is the current code that I have which let's me send an already set variable with object properties. See image below:

SEND JSON

However my question is regarding how i can combine these tho examples so I can make dynamic inputs -> convert them to a JSON object -> Insert them in the api object array.

Feel free to correct me if you think that i'm on the wrong path or if you think have a solution!

If you have any questions or need clarification don't hesitate to ask!

Thanks beforehand!

// E

It looks as though you've got everything you need already. Have you tried just taking the above code, and placing it within what you've got on CodePen? Could you clarify a bit more? — Justin
– Justin, Commented Nov 7, 2017 at 15:20
The codepen code is the first "snippet" that saves the input as an object and the second pasted code is the "snippet" that sends the code to the API. However I can't seem to combine the two code snippets. (Save input to html file and send to API). I want the codepen code to be inside the onload function and POST the new object to my API object array. Haha I hope that explains it better, otherwise ask! :) @Justin — erikos93
– erikos93, Commented Nov 7, 2017 at 15:49

anteAdamovic · Accepted Answer · 2017-11-07 16:19:07Z

1

You could combine them like this (and I think this is the best approach):

Define a function that will be executed on form submit, it will create JSON and send it via ajax:

function formatJSONAndSend(form) {
  var body = {
    title: form.title.value,
    description: form.description.value
  };

  var request = new XMLHttpRequest();
  request.open('POST', 'https://timesheet-1172.appspot.com/af25fa69/notes');
  request.setRequestHeader('Content-Type', 'application/json');    
  request.send(JSON.stringify(body));
}

And you can call it from your HTML like:

<form onsubmit="formatJSONAndSend(this);">
    Title: <input type="text" class="form-control" name="title" placeholder="Title goes here..." /><br /> Description: <input type="text" class="form-control" name="description" placeholder="Description goes here..." /><br />
    <input class="btn btn-primary" id="btn" type="submit" value="Add note">
</form>

After you submit your form by clicking on Add note button it will call the formatJSONAndSend() function which will first grab the data from the form and put it in body object which is then sent via POST to your web api.

Here's a working example: Codepen

edited Nov 7, 2017 at 16:19

answered Nov 7, 2017 at 15:20

anteAdamovic

1,44312 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

erikos93 Over a year ago

Hmm this doesn't seem to work for me. Does it work for you? I will be testing it further tho. Thanks for your response! :) @Ante Jablan Adamović

anteAdamovic Over a year ago

I've added a working example it's a bit different but I've checked and it works ... Codepen might block your request so best to copy over .html and .js to your local machine and test there.

erikos93 Over a year ago

Thanks! I managed to get it to work now! @Ante Jablan Adamović

Collectives™ on Stack Overflow

How to insert HTML form input into API object array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related