Question

Mostly as a personal practice, i’m writing a framework for a personal website i’m working on. Currently I’m trying to create a generic way to display forms on my website. I’m using JSON models to model the form, which is transformed into HTML by PHP. What i’m currently trying to allow is something like this:

[type] [contact address]
[type] [contact address]
+ Add More

I know that with form element names like “type[]”, the value of the various type fields is sent as an array to php. However, in this case, a type and a contact address belong together. I know various ways to achieve this, like looping over the types, and then getting the related other fields, but somehow transforming it into an associative array seems much easier to use in the code.

Note, i know various ways to achieve this, but i’m trying to go for some best practices. I’d prefer doing this in PHP, as i’m trying to minimize the amount of javascript on my website.

Answer 1

You can actually build multidimensional arrays like contact[id][type] and contact[id][address]. Therefore, if you have an id, which could be an incremental value if you are adding new ones, supply the same id for both. PHP will see it as a multidimensional array like $_POST['contact'][1]['type'] == 'sometype, $_POST['contact'][1]['address'] == 'theaddress' .

So your new form inputs look like:

<input id='someid_type_123' name='contact[123][type]' />
<input id='someid_address_123' name='contact[123][address]' />

<input id='someid_type_124' name='contact[124][type]' />
<input id='someid_address_124' name='contact[124][address]' />

You can then loop over $_POST['contact']:

foreach ($_POST['contact'] as $id => $values) {
  echo $values['type'] . ' ' . $values['address'];
}

And the var_dump($_POST) with sample input would look something like:

array(1) {
  ["contact"]=>
  array(2) {
    [123]=>
    array(2) {
      ["type"]=>
      string(5) "type1"
      ["address"]=>
      string(5) "addr1"
    }
    [124]=>
    array(2) {
      ["type"]=>
      string(5) "type2"
      ["address"]=>
      string(5) "addr2"
    }
  }
}

The method you use to generate the ids in JavaScript (assuming you don’t know them ahead of time) is entirely up to you. You could just start a variable at 1 and increment it each time you click the add more link. The value of id doesn’t really matter, as long as it is the same for the pair of inputs.

// Initialize curId on page load.
var curId = 1;

addMoreLink.onclick = function() {
  // append the new inputs using curId
  // and then increment the value
  curId++;
}