php - PHP、jQuery 和 HTML 中的动态表单处理

Question

呃!有任何想法吗？

有一个表单可以跟踪给定时间间隔内的用户事件。每个时间间隔都可以输入“位置”和多个“事件”。因此，该表单具有可变数量的时间间隔和可变数量的每个间隔的事件。

如何在 HTML 中设置它以便顺利处理 PHP？编辑:可以通过 jQuery 添加额外的间隔和事件。

我最初的想法很复杂，所以有人有更好的主意吗？

<!--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[]" />

这是服务器端的噩梦。

Answer 1

您可能需要按位置/间隔隔离事件。一种解决方案是为每个间隔使用一个索引，这涉及更改为每个间隔创建新 html 元素的方式。

因此生成的代码将是:

<!--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][]" />

但操作起来不如 :

<!--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" />

这会给你一个很好的树(以数组的数组的形式)来迭代。

为此，您需要一个 javascript 函数来跟踪当前区间索引并使用该索引对区间数组进行排序。

服务器端你所要做的就是(在 POST 方法的情况下):

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

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

}