Dynamic Form Handling in PHP, jQuery & HTML

Question

Ugh! Any ideas?

Have a form which tracks user activity for given time intervals. Each time interval can have inputs for "location" & multiple "activities". So the form has a variable number of time intervals and a variable number of activities per interval.

How can I set this up in HTML for smooth processing PHP? EDIT: Additional intervals and activities can be added via jQuery.

My initial thought is convoluted so anyone have a better idea?

<!--Interval 1 with 4 activities-->
<input type="text" name="interval[]" />
  <input type="text" name="location[]" />

  <input type="text" name="activity[]" />
  <input type="text" name="activity[]" />
  <input type="text" name="activity[]" />
  <input type="text" name="activity[]" />

<!--Interval 2 with 2 activities-->
<input type="text" name="interval[]" />
  <input type="text" name="location[]" />

  <input type="text" name="activity[]" />
  <input type="text" name="activity[]" />

This is a nightmare on the server side.

dader · Accepted Answer · 2011-06-21 21:10:54Z

You may need to isolate activities per location / interval. A solution would be to use an index for each interval, this involve to change the way you create the new html elements for each interval.

So the resulting code would be :

<!--Interval 1 with 4 activities-->
<input type="text" name="interval[1][]" />
  <input type="text" name="location[1][]" />

  <input type="text" name="activity[1][]" />
  <input type="text" name="activity[1][]" />
  <input type="text" name="activity[1][]" />
  <input type="text" name="activity[1][]" />

<!--Interval 2 with 2 activities-->
<input type="text" name="interval[2][]" />
  <input type="text" name="location[2][]" />

  <input type="text" name="activity[2][]" />
  <input type="text" name="activity[2][]" />

But it's not as smooth to manipulate as :

<!--Interval 1 with 4 activities-->
<input type="text" name="interval[1][interval]" value="interval id" />  // optional
<input type="text" name="interval[1][location]" value="location" />
<input type="text" name="interval[1][activity][]" value="activity" />
<input type="text" name="interval[1][activity][]" value="activity" />
<input type="text" name="interval[1][activity][]" value="activity" />
<input type="text" name="interval[1][activity][]" value="activity" />

<!--Interval 2 with 2 activities-->
<input type="text" name="interval[2][interval]" value="interval id" />  // optional
<input type="text" name="interval[2][location]" value="location" />
<input type="text" name="interval[2][activity][]" value="activity" />
<input type="text" name="interval[2][activity][]" value="activity" />

Which will give you a nice tree ( in the form of arrays of arrays ) to iterate over.

In order to do that, you need a javascript function that keep a track of the current interval index ans use that index to order the array of intervals.

Server side all you have to do is ( in case of POST method ) :

foreach ( $_POST['interval'] as $k => $interval ) {

    echo $interval['interval'];
    echo $interval['location'];
    foreach ( $interval['activity'] as $id => $activity )
        echo $activity;

}

Collectives™ on Stack Overflow

Dynamic Form Handling in PHP, jQuery & HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related