CODEWITHSUNDEEP
javascriptjqueryjson
fthiella
fthiella

Reputation: 49089

How to submit a form and pass some extra parameters to a $.getJSON callback method?

I know how to pass some parameters to a JQuery $.getJSON callback method, thanks to this question:

$.getJSON('/website/json',
{
  action: "read",
  record: "1"
}, 
function(data) {
   // do something
});

And I can also submit a form to a $.getJSON callback method:

$.getJSON('/website/json', $(formName)
function(data) {
   // do something
});

But I want to pass some parameters AND submit some form elements. How can I combine the two things togheter?

I could serialize the form elements and manually add some parameters to the url, and it looks like it works:

$.getJSON('/website/json',
  'action=read&record=1&'
  + $(formName).serialize(),
function(data) {
   // do something
});

But it doesn't look very elegant. Is this the proper way, or there's a better way to do it?

Upvotes: 5

Views: 369

Answers (2)

sdgluck
sdgluck

Reputation: 27327

We could implement the functionality demonstrated in this answer as a custom jQuery instance method which produces an object of key/value pairs from a form and combines it with the properties that aren't derived from the form:

$.fn.formObject = function (obj) {
    obj = obj || {};
    $.each(this.serializeArray(), function (_, kv) {
        obj[kv.name] = kv.value;
    });
    return obj;
};

$.getJSON('/website/json', $(formName).formObject({
    action: "read",
    record: "1"
}), function(data) {
   // do something
});

Upvotes: 2

deek
deek

Reputation: 1095

Make an Ajax post to send the data to the server. Retrieve the parameter data in the backend code along with the form data.

var formData = {data from form};

formData.action = 'read';
formData.post = '1';

$.ajax({
  url: '/website/json',
  type: "post",
  data: formData
}).done(function (data) {
    // remove prior values set upon request response

    formData.action = null;
    formData.post = null;
});

Upvotes: 0

Related Questions