How do I post data from contact form to API?

Question

I'm in over my head and just need to be pointed in the right direction so I can learn. I am creating a contact form on my site and I want it to create a ticket within Groove (https://www.groovehq.com/docs) when submitted. I can't figure out how to get the form data to first get formatted in JSON and then posted to the API. I would prefer to do this using jQuery if that is possible.

I would really appreciate if someone could point me in the right direction. I have very limited experience using APIs. Thanks.

Going to be very difficult to assist you without seeing what you've tried first. That being said, if you haven't tried *anything*, I suggest starting there. — Tim Lewis, Jun 22 '15 at 20:39
You can have a look at this for serializing the form data http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery and this http://api.jquery.com/jquery.ajax/ for posting to your api — IsakBosman, Jun 22 '15 at 20:42

score 1 · Answer 1 · answered Jun 22 '15 at 20:46

You can use jQuery serialize method.

$('form').submit(function(e){
    e.preventDefault();

    var url = 'your-url-here';
    var data = $(this).serialize();

    $.post(url, data)
        .success(function(resp){
            console.log('it works!');
        });
}

score 0 · Answer 2 · answered Jun 22 '15 at 20:53

You want to check if the url return value in JSON like

{"Keyname1":"1","Keyname2":"2"}

And your jQuery code to consume the Api could be like this:

$("#submit").click(function(){

     $.ajax({
        type:"post",
        url:"https://api.groovehq.com/v1/me?access_token=41529cf5de0f4daa10098ff4881521c0cfea8b127d8e11bc5cc2cadb974e9a72",
        dataType: "json",
        beforeSend: function(){
                        $('#message').html('<img src="img/Loading.gif"/> Loading data');                            
                    },
        success:function(result){

                    //Print all result keyname
                    alert(result.Keyname1);
                    alert(result.Keyname2);
                                }
     });
   });

How do I post data from contact form to API?

2 Answers2