Add object(s) to form submission (post)

Question

I have a form and I have two objects I want to submit with that form.

<form role="form" id="orderform" action="test.php" method="post">
    <input type="text" name="test">
    <button type="submit">Place Order</button>
</form>

<script>

    var items1 = {name: "test", value: "123"} //needs to submit with form

    var items2 = {name: "test2", value: "456"} //meeds to submit with form

    $("#orderform").submit(function(event) {

        event.preventDefault();

        //do something to add items1 and items2 to form.

    }

</script>

How do I submit items1 and items2 with the form submission?

Serialize them in some form (for example by encoding them as JSON), and put the results into hidden fields. — CBroe, Jan 07 '21 at 08:12

Aaron · Answer 1 · 2021-01-07T08:47:52.773

There are already answers to this question (Adding POST parameters before submit) but I personally think that adding dom elements should not be the way to go.

My approach would be to get the form data onsubmit and add your objects to it. Afterwards send the request. The major benefits are you can make use of ajax (which in fact improves the user experience) and dont have to modify / add dom elements which can get quite nasty if you add more than 2 objects.

var items1 = {
  name: "test1",
  value: "123"
} //needs to submit with form

var items2 = {
  name: "test2",
  value: "456"
} //meeds to submit with form

$("#orderform").submit(function(event) {

  event.preventDefault();
  //add the items to the form data
  let data = $(this).serializeArray();
  data.push(items1);
  data.push(items2);
  let params = $.param(data);
  //send the data with ajax
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    data: data,
    success: function(data) {
      window.location.href = "success.php"+params;
    },
    error: function() {
    }
});
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="orderform" action="test.php" method="post">
  <input type="text" name="test">
  <button type="submit">Place Order</button>
</form>

In order to show the results on a seperate page I'd add the form data as get parameters to the success redirect and show them like this.

Please also read on XSS and how to avoid it (sanitize input / parameters). success.php should look like the following.

echo $_GET["test1"];
echo $_GET["test2"];

Yes but how to I load a new page, like a confirmation page with the data? — jac, Jan 07 '21 at 08:22
Simply add window.location.href and then the desired url. @jac — Aaron, Jan 07 '21 at 08:25
With the data, meaning I need the confirmation page to show "items1", "items2" — jac, Jan 07 '21 at 08:32
Since I dont know your server structure (assuming you use php), my approach would be the following. Check my edited snippet. @jac — Aaron, Jan 07 '21 at 08:33
I don't understand how success.php is getting those two variables. — jac, Jan 07 '21 at 08:42
Ah sorry, I forgot to add them to the url. Please check the snippet again @jac — Aaron, Jan 07 '21 at 08:47

score 0 · Answer 2 · answered Jan 07 '21 at 08:12

You can add them as hidden inputs.

let items = [
  {
    name: 'bar',
    value: 'foo',
  },
  {
    name: 'qux',
    value: 'baz',
  },
];

let form = document.getElementById('orderform');

let itemsToBeSubmited = items;
itemsToBeSubmited.forEach((item) => {
  let input = document.createElement('input');
  input.setAttribute('type', 'hidden');
  input.setAttribute('name', item.name);
  input.setAttribute('value', item.value);
  form.appendChild(input);
});

<form role="form" id="orderform" action="test.php" method="post">
    <input type="text" name="test">
    <button type="submit">Place Order</button>
</form>

Add object(s) to form submission (post)

2 Answers2