CODEWITHSUNDEEP
phpjqueryhtmlformsserver-side
csi
csi

Reputation: 9328

Dynamic Form Handling in PHP, jQuery & HTML

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.

Upvotes: 2

Views: 1117

Answers (1)

dader
dader

Reputation: 1314

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;

}

Upvotes: 2

Related Questions