JavaScript Voting form (GROUP/OPTION) problems

**bigziomal** · Dec 17, 2012 11:42

Hello World! It's my first post on this forum, hello everybody

I'm working on the small simple voting system. The system is based on php/javascript. I'm getting values from form and I'm sending it to database through php-mysql_query.

I need something like this: http://imageshack.us/photo/my-images/803/97450434.png/

but:

1. I must have option to delete the selected gruop/option (for example if somebody do mistake).
2. There must be an option that you cannot add another group, if you don't add in the previous at least one option.

It must be working for form and post php.

I would be grateful if you help me solve these problems

Code:

<?php
ob_start();
session_start(); // rozpoczecie sesji
require_once('../inc/db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
	<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="js/hideshow.js" type="text/javascript"></script>
	<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
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);
  }
}
</script>
</head>

<body>
<form action="costam.php" method="post">
                <input type="hidden" name="sent" value="true" />
<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="button" value="Add another group" onClick="addGroup('dynamicInput');">
<input type="button" value="Add another option" onClick="addInput('dynamicInput');">
                <input type="submit" value="Add to database" class="alt_btn">
</form>
<?php
if($_POST['sent'])
{
echo 'form sent<br />';
foreach ($_POST['groups'] as $group) {
 	$name = $group['name'];
  	//print_r($options = $group['options']); - this will show options // $name - groups 
	//echo '|asdf|'.$name.'|asdf|';
	$wynik = mysql_query("INSERT INTO `grupa` VALUES('',1,'$name','opis',1,1)") or die("<br /> Error: (" . mysql_errno() . ") " . mysql_error());
	echo 'taka powinna byc grupa'.$name;
	$wynik = mysql_query("SELECT * FROM `grupa` WHERE nazwa = '$name'") or die("<br /> Error: (" . mysql_errno() . ") " . mysql_error());
	if(mysql_num_rows($wynik) > 0) 
			{
				while($r = mysql_fetch_assoc($wynik))
				{
					$id_of_group = $r['id'];
				}
			}
			echo $id_of_group;
			
			$options = $group['options'];
			foreach($options as $k => $v) 
			{
				echo 'key='.$k.'value='.$v;
 			$query = "INSERT INTO `opcje_glosowania` VALUES('','$v',9,'$id_of_group',1)";
      		mysql_query($query)  or die("Twoje QUERY: ".$query."<br /> Error: (" . mysql_errno() . ") " . mysql_error());
			}
}
}
?>
		

</body>
</html>

Database looks similar at:
|====GROUP====|
|------id-----|
|----name----|
|=============|

|====OPTION====|
|------id-----|
|--id_group---| //FK to GROUP.ID
|----name----|
|=============|

**paul_wilkins** · Dec 17, 2012 14:55

A standard way to delete an item is to show an X icon, such as

beside the group itself.

With regard to preventing another group from being added, you could have the add group button disable itself, and the add option button enable the group button.

**bigziomal** · Dec 17, 2012 14:58

Thanks @paul_wikins,

The idea is good, but... How to implement it in my code ??

**paul_wilkins** · Dec 17, 2012 15:09

Originally Posted by bigziomal

Thanks @paul_wikins,

The idea is good, but... How to implement it in my code ??

That much is simple. You give the add group button an identifier so that you can easily access it from the script.
When you add a group, you set the disabled property of the button to be true. When you add an option, you set the disabled property of the group button to false.

**bigziomal** · Dec 17, 2012 15:33

Could you give me some code ?? I'm newbie at javascript ...

**paul_wilkins** · Dec 17, 2012 16:10

Originally Posted by bigziomal

Could you give me some code ?? I'm newbie at javascript ...

This is a good place to learn, then.

What are the things that need to be done?

give the add group button an identifier
when adding a group, set the disabled property of the group button to true
when adding an option, set the disabled property of the group button to false

Which of those tasks do you need further assistance with?

**bigziomal** · Dec 17, 2012 16:48

THANKS

With some effort, but .. it's workinkg

How about deleting options and group ??

my current code:

Code:

<?php
ob_start();
session_start(); // rozpoczecie sesji
require_once('../inc/db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
	<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="js/hideshow.js" type="text/javascript"></script>
	<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
var counter_group = 0;
var limit_group = 10;
var counter_option = 0;
var limit_option = 10;
var identifier_of_group = document.getElementById('identifier_of_group');

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);
	document.getElementById('identifier_of_group').disabled = false;
  }
}

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);
	document.getElementById('identifier_of_group').disabled = true;
  }
}
</script>
</head>

<body>
<form action="costam.php" method="post">
                <input type="hidden" name="sent" value="true" />
<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="button" id="identifier_of_group" value="Add another group" onClick="addGroup('dynamicInput');">
<input type="button" value="Add another option" onClick="addInput('dynamicInput');">
                <input type="submit" value="Dodaj do bazy" class="alt_btn">
</form>
<?php
if($_POST['sent'])
{
echo 'form sent<br />';
foreach ($_POST['groups'] as $group) {
 	$name = $group['name'];
  	//print_r($options = $group['options']);
	//echo '|asdf|'.$name.'|asdf|';
	$wynik = mysql_query("INSERT INTO `grupa` VALUES('',1,'$name','opis',1,1)") or die("<br /> Error: (" . mysql_errno() . ") " . mysql_error());
	echo 'taka powinna byc grupa'.$name;
	$wynik = mysql_query("SELECT * FROM `grupa` WHERE nazwa = '$name'") or die("<br /> Error: (" . mysql_errno() . ") " . mysql_error());
	if(mysql_num_rows($wynik) > 0) 
			{
				while($r = mysql_fetch_assoc($wynik))
				{
					$id_swiezo_dodanej_grupy = $r['id'];
				}
			}
			echo $id_swiezo_dodanej_grupy;
			
			$options = $group['options'];
			foreach($options as $k => $v) 
			{
				echo 'key='.$k.'value='.$v;
 			$query = "INSERT INTO `opcje_glosowania` VALUES('','$v',9,'$id_swiezo_dodanej_grupy',1)";
      		mysql_query($query)  or die("Twoje QUERY: ".$query."<br /> Error: (" . mysql_errno() . ") " . mysql_error());
			}
}
}
?>
		

</body>
</html>

**paul_wilkins** · Dec 17, 2012 18:58

Originally Posted by bigziomal

THANKS

With some effort, but .. it's workinkg

How about deleting options and group ??

When adding an input, you could also add the delete image icon beside the input field and attach a click event to it.

HTML Code:

<img src="delete.png" onclick="deleteInput(this)">

Then you can go to the parent of that image to the div, and remove that div which contains all that was added for the input.

**bigziomal** · Dec 18, 2012 01:24

now it works, but....

look:

http://jsfiddle.net/CbJTD/

When I will add the group, add the option 1 to this, add the another option 2 to this and delete these two options, later add option you will see Option 3 - not option 1 in this group. Why and how to repair that?

Second questions is if I mind to delete group - it's delete only group - not all content of a div (all options). I must have two different divs for that?

Thank you very much for your answers @pauls_wikins from New Zealand, greetings from Poland

**paul_wilkins** · Dec 19, 2012 00:04

Originally Posted by bigziomal

When I will add the group, add the option 1 to this, add the another option 2 to this and delete these two options, later add option you will see Option 3 - not option 1 in this group. Why and how to repair that?

You will need to loop through the remaining options in that section and renumber them.

Originally Posted by bigziomal

Second questions is if I mind to delete group - it's delete only group - not all content of a div (all options). I must have two different divs for that?

The options are all contained within the group div, so just removing the group div will result in all of the contained options being removed too.

**bigziomal** · Dec 20, 2012 12:27

Thank you very much @paul_wikins

I'm pausing my project for a week, but I will be writing in the future

Thank you again and I hope - see you next time

Merry Christmas 4every1

User Tag List

Thread: JavaScript Voting form (GROUP/OPTION) problems

Thread Tools

Display

JavaScript Voting form (GROUP/OPTION) problems

Bookmarks

Bookmarks

Posting Permissions