CODEWITHSUNDEEP
phpjavascripthtmldynamicvoting
atrzcinski
atrzcinski

Reputation: 43

Create dynamic input text of group and options and transfer it to php

I'm writing simple remote voting system in PHP and I have problem with control of dynamic options and groups in php form.

I would like to have something like this, but.... (asks are at the bottom of my post):

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

I have the following code:

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. How to edit this code to have dependence each option to the right group and reset the counter of options to 0 if I will add another group?
Group1, Option1, Option2;
Group2, Option1, Option2; etc.

2. How to put these values later to the php variables, array or sth... - I would like to insert these values to the database (php script). Script must knows that the option corresponding to the right group.

My database has two tables: Groups and Options(FK to Group)

Link to jsfiddle edit: http://jsfiddle.net/mnyyK/

Please, help....

Upvotes: 4

Views: 2156

Answers (1)

Alexander
Alexander

Reputation: 23537

You can use a multidimensional array.

Change the names of your groups to:

<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>

On adding a new group increase the groups' index e.g. 

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


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

You should be able to process the groups in PHP this way:

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

UPDATE

To clear confusions, here is the actual code:

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);
  }
}

Upvotes: 1

Related Questions