Proper AJAX GET structure using JQUERY

Question

I have created a form with several inputs, I need to pull those values from the inputs and submit to an API using an ajax GET. I am having problems structuring my ajax call and also verifying the call was successful. I have searched and seen "GET"s structured several different ways and need to know which way is proper/ when to use different structures.

below is my form

<form id="target" method="GET" enctype="multipart/form-data" >

<p>First Name: <input class="field" type="text" name="firstName" id="firstname" required></p> 

<p>Last Name: <input class="field" type="text" name="lastName" id="lastname" required> </p>

<p>Email: <input class="field" type="email" name="email" id="email" required></p>

<p>Zip Code:<input class="field" type="number" name="zip" id="zip" required></p>
<p class="small"><input type="checkbox" id="privacy" name="privacy" value="Agree" required>I certify that I am a U.S. resident over the age of 18, and I agree to the Privacy Policy</p>

here is my jquery assigning the form values to variables and the ajax call

$(document.ready(function(){  ............


     $('#target').submit(function(event) {
    // get the form data

        var firstName = $('input[name=firstName]').val();
        var lastName  = $('input[name=lastName]').val();
        var email     = $('input[name=email]').val();
        var zip       = $('input[name=zip]').val();



    // process the form
    $.ajax({
        type        : 'GET',
        url         : 'http://test.XXXXXXX.com/x/x/x/x/x/x/.action?source=182081&firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,
        dataType    : 'json',
        success: function(data){
    alert('successful');
  }

    })
        .done(function(data) {

            console.log(data); 

        });

    event.preventDefault();


    $('#banner-expanded').hide();
    $('#container1').hide();
    $('#thankyou').show();


});

The two main questions I have..

1) Is the ajax call structured properly? should i take the URL and Data and break them up like so?

        url         : 'http://test.XXXXXXX.com/api/event/form/optinNational.action?source=182081&
                    data            : firstName='+firstName+'&lastName='+lastName+'&email='+email+'&zip='+zip,

2) Besides the "alert" and "console.log" I put, is there any other way to see if the call is successful?

I created a jsfiddle here http://jsfiddle.net/33snB/5/

thanks in advance

Answer 1

You are doing way too much manual labor here. This will do the same work:

var url =  'http://test.XXXXXXX.com/api/event/form/optinNational.action';
$.ajax({
    type        : 'GET',
    url         :  url,
    data: $('#target').serialize(),
    dataType    : 'json',
    success: function(data){
        alert('successful');
    }
});

And yes, its in the success callback you get your result back and know the call worked. Errors result in thecallback error.

Answer 2

Try it like this:

data : {
    source: 182081
    firstName: firstName,
    lastName: lastName,
    email: email,
    zip: zip,
},
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

or trim it down to just:

data : $('#target').serialize()
url: 'http://test.XXXXXXX.com/api/event/form/optinNational.action

Resource: Submit form using AJAX and jQuery

Answer 3

You can use the jQuery serialize function to help you out here. Something like this will work:

$('#target').submit(function(event) {
    event.preventDefault();
    var data = $('form').serialize();
    $.get('url', data, function(data){
        alert('successful');
        console.log(data);
        $('#banner-expanded').hide();
        $('#container1').hide();
        $('#thankyou').show();
    });
});

Answer 4

why dont you use jquery's $,.get or $.post request.

simply for checking press ctrl+I and in developers mode look for networks tab. There all requests made to server will be found.

$.get(url,{
 firstname : firstname,
 lastname : lastname
 ...
 //etc all values here

},function(data){

  //callback sucess

},'json');

Answer 5

values should be sent using data but your syntax is wrong.

data: { firstName: firstName, lastName: lastName, email: email, zip:zip },

Firebug, a Firefox add on is an excellent tool to see post/get calls to the server and the data returned. Very useful for debugging. Chrome and IE have similar but I find Firefox with firebug the most useful.