5

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?

Community
  • 1
  • 1
fthiella
  • 48,073
  • 15
  • 90
  • 106
  • You can pass them like: `$.getJSON('/website/json', { action: "read", record: 1, .. }` - not sure what else ya can do. – tymeJV Sep 24 '15 at 22:21
  • why not just have the parameters you want to pass be part of the form element, perhaps as hidden input elements? – Neil S Sep 24 '15 at 22:26

2 Answers2

2

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
});
sdgluck
  • 24,894
  • 8
  • 75
  • 90
0

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;
});
fthiella
  • 48,073
  • 15
  • 90
  • 106
deek
  • 1,085
  • 1
  • 9
  • 27
  • What is `{data from form}`? That isn't legal JavaScript. – sdgluck Sep 25 '15 at 09:02
  • @sdgluck it's like a placeholder, "put here the selector you want", I'm going to test both answers soon and I'll give you feedback.. thanks :) – fthiella Sep 25 '15 at 15:06
  • @deek I like this approach, but I cannot make it work. The ajax post is fine, but "action" and "post" don't seem to be sent to the server. Am I doing something wrong? – fthiella Sep 26 '15 at 15:07
  • @fthiella how are you calling the data? data.action? Try data.formData.action. Alternatively, the ajax request finished before the new properties were added. You could use a promise to set those values(or Jquery's ajax beforeSend). Does action and post return a null value or come back as undefined? – deek Sep 26 '15 at 20:15