创建组和选项的动态输入文本并将其传输到php

发布时间：2020-12-13 22:46:44 所属栏目：PHP教程来源：网络整理

导读：我正在用 PHP编写简单的远程投票系统,我在php格式中控制动态选项和组有问题. 我想有这样的东西,但….(请问在我的帖子的底部)： http://imageshack.us/photo/my-images/803/97450434.png/ 我有以下代码： HTML： fieldset style="width:99%; float:left" div

我正在用 PHP编写简单的远程投票系统,我在php格式中控制动态选项和组有问题.

我想有这样的东西,但….(请问在我的帖子的底部)：

http://imageshack.us/photo/my-images/803/97450434.png/

我有以下代码：

HTML：

<fieldset style="width:99%; float:left">
         <div id="dynamicInput">
              Group 1<br><input type="text" name="myGroupInputs[]">
                 <div id="dynamicInput" style="margin-left:50px;">
                      Option 1<br><input type="text" name="myOptionsInputs[]">
                 </div>
         </div>
             <input type="button" value="Add another group" onClick="addGroup('dynamicInput');">
             <input type="button" value="Add another option" onClick="addInput('dynamicInput');">         
</fieldset>

JS：

var counter_option = 1;
var limit_option = 10;
var counter_group = 1;
var limit_group = 10;
function addInput(divName){

     if (counter_option == limit_option)  {
           alert('You cannot add more options.');
     }
    else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<font style='margin-left:50px;'>Option</font> " + (counter_option+ 1) + " <br><input type='text' style='margin-left:50px;' name='myOptionsInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter_option++;
     }
}
function addGroup(divName){

     if (counter_group == limit_group)  {
           alert('You cannot add more groups.');
     }
    else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Group " + (counter_group + 1) + " <br><input type='text' name='myGroupInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter_group++;
     }
}

1.如何编辑此代码以使每个选项都依赖于正确的组,如果我要添加另一个组,则将选项的计数器重置为0？
Group1,Option1,Option2;
Group2,Option2;等等

2.如何将这些值稍后放到php变量,数组或sth … – 我想将这些值插入数据库(php
???脚本).脚本必须知道对应右边的选项
???组.

我的数据库有两个表：
组和选项(FK到组)

链接到jsfiddle编辑：
http://jsfiddle.net/mnyyK/

请帮忙….

解决方法

您可以使用多维数组.

将您的群组名称更改为：

<div id="dynamicInput">
  Group 1
  <br>
  <input type="text" name="groups[0][name]">
  <div id="dynamicInput" style="margin-left:50px;">
    Option 1
    <br>
    <input type="text" name="groups[0][options][]">
  </div>
</div>

添加新组时会增加组的索引,例如

"<input type='text' name='groups[" + counter_group + "][name]'>"

"<input type='text' name='groups[" + counter_group + "][options][]'>"

您应该能够以这种方式在PHP中处理组：

foreach ($_POST['groups'] as $group) {
  $name = $group['name'];
  $options = $group['options'];
  ...
}

UPDATE

为了清除混淆,这是实际的代码：

var counter_group = 0;
var limit_group = 10;
var counter_option = 0;
var limit_option = 10;

var addInput = function(divName) {
  if (counter_option == limit_option - 1) {
    alert('You cannot add more options.');
  } else {
    counter_option++;
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "<font style='margin-left:50px;'>Option</font> " + (counter_option + 1) + "<input type='text' name='groups[" + counter_group + "][options][]'>";
    document.getElementById(divName).appendChild(newdiv);
  }
}

var addGroup = function(divName) {
  if (counter_group == limit_group - 1) {
    alert('You cannot add more groups.');
  } else {
    counter_group++;
    counter_option = -1;
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Group " + (counter_group + 1) + "<input type='text' name='groups[" + counter_group + "][name]'>";
    document.getElementById(divName).appendChild(newdiv);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!