SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JavaScript Voting form (GROUP/OPTION) problems

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks @paul_wikins,

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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigziomal View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you give me some code ?? I'm newbie at javascript ...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigziomal View Post
    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?
    1. give the add group button an identifier
    2. when adding a group, set the disabled property of the group button to true
    3. when adding an option, set the disabled property of the group button to false


    Which of those tasks do you need further assistance with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigziomal View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigziomal View Post
    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.

    Quote Originally Posted by bigziomal View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Bialystok, Poland
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •