SUBMIT custom object as POST vars to url?

Question

So I have converted the values of a "completed" HTML form, to a custom DATA object to be made available to various js.functions, which may or may not update the values of said DATA object parameters before the object MAY, or may NOT ultimately be passed (via ajax) to PHP for database manipulation before the form data is ultimately submitted (to paypal).

Of course I know how to submit a form, and to pass an object as POST data via AJAX, but I'm wondering how or if it might be possible to post my DATA object (again, to payapl) in lieu of having to stop along the way to update the input values of the form itself, just so I can submit it. Something like...

<script>
data = {};
data.type ='form';
data.method ='post';
data.action ='https://www.sandbox.paypal.com/cgi-bin/webscr';
data.foo = 'foo';
data.bar = 'bar';
jQuery('#btn').click(function(){ jQuery('#form').submit(); });
jQuery('#post_data').click(function(){ data.submit();/*duh....???*/ });
</script>

<form id='data' action='https://www.sandbox.paypal.com/cgi-bin/webscr' method='post'>
    <input type='text' name='foo' value='foo' />
    <input type='text' name='bar' value='bar' />
</form>
<input type='button' id='btn' value='Submit'>
<input type='button' id='post_data' value='Post Data'>

which of course does not work...;-(

you don't have to submit a form. you can submit a serialized data structure, e.g. your `data` array. — Marc B, Feb 05 '13 at 20:57
serialize(data).submit() ??? type? method? action? syntax pleeeazzz? — WallabyKid, Feb 05 '13 at 21:00
I did'nt know a string or JS object actually had a submit() method ? — adeneo, Feb 05 '13 at 21:09
@adeneo as AFIK they don't, but that's what I'm hoping to find out. — WallabyKid, Feb 06 '13 at 01:27
@MarcB it seems what your suggesting is basically to append the paypal URL with a url encoded string (serialized array), which would work if GET were an acceptable method at the target, however I don't believe that is the case for paypal? — WallabyKid, Feb 06 '13 at 01:44

Clemens Klein-Robbenhaar · Answer 1 · 2013-02-06T23:57:42.690

As Marc B said in one comment, you can just pass in a normal object into jQuery.post, and it will be "serialized" when send to the server. Getting the response from the server and submit it with the form is a different issue. Actually I assume the "PHP for database manipulation" thing returns a JSON-object with the same fields as one has passed in - or at least such as we have form fields in the form which should finally be submitted to paypal (or whatever).

So just sending the data is easy: jQuery.post('yourDatabaseManipulation.php', data); This one has no callback to handle the result ... trying handle that resulted in the following somewhat crazy code:

jQuery('#post_data').click(function() {
  var $form = jQuery(this).parents('form');

  jQuery.post('yourDatabaseManipulation.php', data).done(function(validatedData) {

    // returned values: fill into form before submit
    for (key in validatedData) {
      // special cases need extra attention
      if (key == 'action' || key == 'method') {
        $form.attr(key, validatedData[key]);
      } else if (key == 'type') {
        // no idea what to do with this one, so ignore it
      } else {
        // everything else should have a input field in the form
        // or it will just be dropped
        // FIXME: we trust our server response not to do some nasty XSS via keys here
        var $field = jQuery("input[name='"+key+"']", $form);
        $field.val(validatedData[key]);
      }
    }
    $form.submit();

  }).fail( function(jqXHR, textStatus, errorThrown) {
      // our very sophisticated error handling
      alert('fail '+textStatus);
  });

});

This should take the values it gets from the yourDatabaseManipulation.php, overwrites everything the user has typed in with the "validated" values (including possibly a different form action), and then submits the form. I am not sure if you wanted to do that, but I hope you can figure out from there what you really wanted to do.

Edit: just figured out that the above code only works when you move the submit button inside of the <form> which I did automatically when testing. If you do not want to do that, initialize the variable holding the form differently, e.g. var $form = jQuery('#data')

SUBMIT custom object as POST vars to url?

1 Answers1