Submitting Form with non standard POST data format

Question

I have a standard HTML form embedded in a PHP page that posts to an external Job Application API hosted and managed by a third party. The problem is that their form doesn't expect a load of $_POST parameters as usual, but wants one single $_POST parameter ('params') in the following format:

params="Prop2:title;Prop4:lastname;Prop6:firstname;"

And so on - there's about 30 fields.

How can I take the form inputs and convert to the single long string? Does this need some form of intermediary step between submit and post (In which case how would I put in the intermediary step?) or am I missing something more fundamental here?

The example form below works with a test textarea input with the required params presubmitted, but obviously ignores the actual firstname lastname inputs.

<form id="#applicationForm" method="POST" action="https://www.example.com/eternal-api">

  <input id="lastname" name="lastname" type="text" placeholder="Last name (Required)" class="input-xlarge" required="">
  <input id="firstname" name="firstname" type="text" placeholder="First Name (Required)" class="input-xlarge" required="">
  <textarea name="params" rows="2" cols="150">Prop4:Test_lastname;Prop6:test_firstname;</textarea>
  <input type="submit" value="Submit Application" class="btn btn-success">

</form>

To confuse matters, some of the inputs are upload fields, but I'll worry about that next!

You could use a webrequest: http://php.net/manual/en/httprequest.send.php — Pete, Jan 20 '15 at 11:16

score 1 · Answer 1 · answered Jan 20 '15 at 11:07

1

You can use javascript to pre-process form data, and then post it to their url via Ajax. To get the data:

params="firstname:"+$("#firstname").val() + "; lastname: " + ....

to post it, you can use ajax POST..

$.Post(url, {data})

More details can be found at jquery POST documentation

answered Jan 20 '15 at 11:07

Tarun Gaba

1,103
1
8
16

Thanks for that, very helpful. Can I post to an external server using ajax? I was under the impression that it had to be on the same server? – Christian Mayne Jan 20 '15 at 11:09
1

Not necessary, friend! Unless the "other server" has restrictions for cross domain requests, I guess it should not be any problem. If you find the answer correct, you can mark it as accepted .. :) – Tarun Gaba Jan 20 '15 at 11:13

score 1 · Accepted Answer · answered Jan 20 '15 at 11:17

I would try a very basic approach:

$('#applicationForm').submit(function(e) {

  var params = '';

  $(this).find('input, textarea, select').filter('[name]').each(function() {

    if ($(this).is('textarea')) {

      params += $(this).val();
      return;

    }

    params += $(this).attr('name') + ':' + $(this).val() + ';';


  });

  $(this).append($('<input>', {

    type: 'hidden',
    name: 'params',
    value: params

  }));
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="applicationForm" method="POST" action="https://www.example.com/eternal-api">

  <input id="lastname" name="lastname" type="text" placeholder="Last name (Required)" class="input-xlarge" required="">
  <input id="firstname" name="firstname" type="text" placeholder="First Name (Required)" class="input-xlarge" required="">
  <textarea name="params" rows="2" cols="150">Prop4:Test_lastname;Prop6:test_firstname;</textarea>
  <input type="submit" value="Submit Application" class="btn btn-success">

</form>

I loop trough every element and gather the values. Then I append an hidden input with your values

Great answer - thankyou. Only problem is it takes both values for Radio Buttons, but I've replaced these with Selects which work fine. Thanks very much — Christian Mayne, Jan 20 '15 at 15:00
Yes I forgot about radio buttons. You can use them when specify that only selected radio buttons are allowed (use :checked as selector) — Fuzzyma, Jan 20 '15 at 15:02

score 0 · Answer 3 · answered Jan 20 '15 at 11:02

0

It is JSON? If yes, use jQuery. jquery ajax doc

answered Jan 20 '15 at 11:02

Mikrobi

341
1
4

Why does it have to be in jQuery? – Daan Jan 20 '15 at 11:03
I did look at that, but as it's not hosted on the same server, I don't think I can use ajax? – Christian Mayne Jan 20 '15 at 11:04
1

Why jQuery - Simple, well documented :). Other server is not a problem. – Mikrobi Jan 20 '15 at 11:06
Other server - http://stackoverflow.com/questions/5141531/cross-domain-jquery-ajax-request – Mikrobi Jan 20 '15 at 11:12

Submitting Form with non standard POST data format

3 Answers3