Linux, Apache, MySQL, PHP

enhzflep29-Dec-09 14:14

29-Dec-09 14:14

I always did enjoy creating custom controls.

Hope you can alter the code I came up with this morning to better suit your needs.

The steps I followed were:
(1) - create a non-functioning 'radio-button' using dreamweaver's design mode.
(2) - add a state attribute
(3) - alter the state for mouse over/out/click events
(4) - redraw the radio-button, using the appropriate image for it's state.
(5) - add a couple more buttons, ensure that the mouseover/out works for the new buttons
(6) - make a function that will create and append new radio-buttons for me.
(7) - modify the onclick routine so that all radio-buttons in the group are unchecked, before checking the one that recieved the onclick notification.

Hope I haven't forgotten anything too important above.

To use the supplied code, just save in a folder that contains rb1.png, rb2.png, rb3.png, rb4.png

<!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>Untitled Document</title>
<script type="text/javascript">
function byId(e){return document.getElementById(e);}
function byName(e){return document.getElementsByName(e);}
function changeState(el, stateMod){el.state ^= stateMod;}

function updateImg(el)
{
	imgs = Array("rb1.png", "rb2.png", "rb3.png", "rb4.png");
	el.src = imgs[el.state];
}

function toWord(num)
{
	var words = Array("zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine");
	return words[num];
}

function drawRadioGroup(groupName)
{
	var elements, i, count;
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
		updateImg(elements[i]);
}

function doClick(el)
{
	var elements, i, count;
	elements = byName(el.name);
	count = elements.length;
	for (i=0; i<count; i++)
	{
		elements[i].state &= 1;
		updateImg(elements[i]);
	}
	el.state |= 2;
	updateImg(el);
}

function getRadioGroupValue(groupName)
{	
	result = "none selected";
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
	{
		if (elements[i].state >= 2)
			result = elements[i].value;
	}
	return result;
}

function addRadioButton(groupName, optionValue, labelValue, tgtContainer)
{
	lblObj = document.createElement("label");
	lblText = document.createTextNode(labelValue);
	
	imgObj = document.createElement("img");
	imgObj.name = groupName;
	imgObj.src = "rb1.png";
	imgObj.width = "12";
	imgObj.height = "12";
	imgObj.value = optionValue;
	
	newLineObj = document.createElement("br");

	imgObj.onmouseout =  function(){ changeState(this, 1); updateImg(this); }  //onmouseout="changeState(this, 1); updateImg(this)"
	imgObj.onmouseover = function(){ changeState(this, 1); updateImg(this); }
	imgObj.onclick = function(){doClick(this);}
	
	lblObj.appendChild(imgObj);
	lblObj.appendChild(lblText);
	tgtContainer.appendChild(lblObj);
	tgtContainer.appendChild(newLineObj);
}

function createGroup(groupName, count)
{
	for (i=0; i<count; i++)
		addRadioButton(groupName, toWord(i), i, byId("radioHolder"));
}

function test2(){alert(getRadioGroupValue("radioGroup1"));}
</script>
</head>
<body onload="createGroup('radioGroup1', 10);">
	<div id="radioHolder"></div>
	<input type="button" value="get dynamic option" onclick="test2()"/><br/>
</body>
</html>

Happy New Year! Thumbs Up | :thumbsup:

thebiostyle30-Dec-09 7:31

30-Dec-09 7:31

Thanks for this, okay, I got up dreamweaver, and I got the amount of radio buttons I need, but I added the appropriate labels to them, even though witht he Poll, it doesn't have a label... It prints out what the label would be after the button though... and it prints out the buttons, so like, if using dreamweaver design mode, you wouldn't see the buttons I don't think. But I got the buttons in a basic html page in dreamweaver right now, so how would I change them to match the images, and after I get that to work, how would I take the coding for that to make it change the images of the radio buttons online to work for the onmouseover, onmouseout, onmousedown, onmouseup, for when the page loads it also loads the buttons as the images. Thanks.

enhzflep30-Dec-09 11:56

30-Dec-09 11:56

That's alright - been idly thinking about the question since I saw it, yesterday was the first time I had some time spare to play with.

First things first - if you don't want labels as your poll doesn't require them, then just forget about the label object. For each radio button, create an img and a br, then simply append them to the target container's child list.

To just add a 'radio-button' without a label use this code (or a suitable modification):

function addRadioButton(groupName, optionValue, tgtContainer)
{
	// create the image object
	imgObj = document.createElement("img");
	imgObj.name = groupName;
	imgObj.src = "rb1.png";
	imgObj.width = "12";
	imgObj.height = "12";
	imgObj.value = optionValue;
	imgObj.onmouseout =  function(){ changeState(this, 1); updateImg(this); }
	imgObj.onmouseover = function(){ changeState(this, 1); updateImg(this); }
	imgObj.onclick = function(){doClick(this);}

	// create the br object
	newLineObj = document.createElement("br");
	
	// add the img & br objects to the target container
	tgtContainer.appendChild(imgObj);	
	tgtContainer.appendChild(newLineObj);
}

Next,
Nope! You can't see a thing in Dreamweaver's design mode - it's a 2 line body. (Although I know dw can show live previews of sites that use a database, I couldn't tell you if it does this via a clever trick, or if it just runs the page)

I think I'm getting a little lost in your question, If I understand what you're asking, I think the code in my first post does that.
I actively encourage the downloading and modification of source code for the purpose of learning.
(It's the way we learn to speak - by copying and modification to suit the situation)

However, let me point out that I have used anonymous functions for the event handlers. Doing this allows the called function to get access to the calling object via the word 'this'.

"When the page loads it also loads the buttons as the images" - pardon?

If I may - when you saved and ran the page I provided above, how was the functionality different from what you want? What doesn't work right?

thebiostyle30-Dec-09 12:17

30-Dec-09 12:17

Well, seeing as I don't normally use Dreamweaver, I mainly use Notepad.   I am just gonna give you the source for the poll page, so you can help me implement the code into it.   Thanks.

--------------------------------------------------------------------------------------------------------------------------------------
<?php
            $title = "What is your Preferred Browser?";
            $choices = array("Firefox",
                                       "Chrome",
                                       "Navigator",
                                       "Safari",
                                       "Opera",
                                       "Inernet Explorer");
?>
<body>
<h3><?php echo $title; ?></h3>
<p>
      <form action="RESULTSPAGE.PHP" method="post">
<?php
   //print possible answers
   for($i=0;$i<count($choices);$i++){
      ?><input type="radio" name="vote" value="<?php echo $i; ?>"> <?php echo $choices[$i]; ?><br /><?php
   }
?>
      <p><input type="submit" value="Vote" style="border-color: rgb(255, 0, 0); color: rgb(255, 0, 0); font-family: Arial; font-weight: bold; font-size: 12px; background-color: rgb(0, 0, 0);"></p>
   </form>
</p>
--------------------------------------------------------------------------------------------------------------------------------------

Thanks for all your help.

enhzflep30-Dec-09 13:20

30-Dec-09 13:20

Yeah, not a massive,massive fan of dreamweaver myself, though for laying out div-tags and some certain operations, it really does suit me.
It's much easier to get it to spit out a few tags then modify in code than it is to remember them all for me.
Tried a bunch of editors, though really none have made me take the effort of making them usb-portable or able to be easily used in linux.
(Done both with dw)
Have you tried Notepad++[^]?

That said, I forget who, but somebody suggested the use of Hidden Fields. These are exactly what I used.
The way I saw it - there were two options for getting the value into the hidden field ready for form-submittal.

(1) Modify the doClick function, so that it updated the hidden field anytime a radio-button was clicked

or

(2) Use the onsubmit handler of the form to grab the value for me, before submitting the form.

I opted for #2, since that keeps the code 'cleaner' and is a more re-usable method.

Here you go:

resultsPage.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>Untitled Document</title>
</head>

<body>
Your preferred browser is: <?php echo $_POST["preferredBrowser"]; ?>
</body>
</html>

index.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>Untitled Document</title>
<script type="text/javascript">
function byId(e){return document.getElementById(e);}
function byName(e){return document.getElementsByName(e);}
function changeState(el, stateMod){el.state ^= stateMod;}

function updateImg(el)
{
	imgs = Array("rb1.png", "rb2.png", "rb3.png", "rb4.png");
	el.src = imgs[el.state];
}

function drawRadioGroup(groupName)
{
	var elements, i, count;
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
		updateImg(elements[i]);
}

function doClick(el)
{
	var elements, i, count;
	elements = byName(el.name);
	for (i=0; i<elements.length; i++)
	{
		elements[i].state &= 1;
		updateImg(elements[i]);
	}
	el.state |= 2;
	updateImg(el);
}

function getRadioGroupValue(groupName)
{	
	result = "none selected";
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
	{
		if (elements[i].state >= 2)
			result = elements[i].value;
	}
	return result;
}

function addRadioButton(groupName, optionValue, labelValue, tgtContainer)
{
	lblObj = document.createElement("label");
	lblText = document.createTextNode(labelValue);
	
	// create the miage object
	imgObj = document.createElement("img");
	imgObj.name = groupName;
	imgObj.src = "rb1.png";
	imgObj.width = "12";
	imgObj.height = "12";
	imgObj.value = optionValue;
	imgObj.onmouseout =  function(){ changeState(this, 1); updateImg(this); }  //onmouseout="changeState(this, 1); updateImg(this)"
	imgObj.onmouseover = function(){ changeState(this, 1); updateImg(this); }
	imgObj.onclick = function(){doClick(this);}
	
	lblObj.appendChild(imgObj);		// add the image to the label object
	lblObj.appendChild(lblText);	// add the label text after the img - text appears to the right of the image

	tgtContainer.appendChild(lblObj);	// add the label object to the target container

	// add the img object to the target container
	newLineObj = document.createElement("br");	// and add a new-line, ready for the next item to be added
	tgtContainer.appendChild(newLineObj);
}

function createGroup(groupName)
{
	choices = Array("Firefox", "Chrome", "Navigator", "Safari", "Opera", "Internet Explorer");
	for (i=0; i<choices.length; i++)
		addRadioButton(groupName, choices[i], choices[i], byId("radioHolder"));
}

function getHiddenValue()
{
	chosenValue = getRadioGroupValue("radioGroup1");
	byId("pollChoice").value = chosenValue;
	return 1;
}

function test2(){alert(getRadioGroupValue("radioGroup1"));}
</script>
</head>
<body onload="createGroup('radioGroup1', 10);">
<h3>What is your Preferred browser?</h3>
	<div id = "radioHolder"></div>
    <form id="dummyForm" action="resultsPage.php" method="post" onsubmit="getHiddenValue();">
        <input type="hidden" name="preferredBrowser" id="pollChoice" value=""/>
    	<input type="submit" value="Vote"/><br/>
</body>
</html>

thebiostyle30-Dec-09 13:34

Re: Radio Buttons [modified x2]

30-Dec-09 13:34

So all I have to do now is copy the "index.php" text, and paste it into a page called index.php and it will work...? Well I'll try it, hopefully it works, Thanks!

enhzflep30-Dec-09 13:41

30-Dec-09 13:41

Hmm - possibly not.

It works fine in FF, but I just tried the page in chrome again, and it no works! (Love the firebug extension for firefox)

CRAP! IE6 no good either (the function to retrieve the selected option isn't working right)

OK - Opera works.

Making the code work cross-browser is left as an exercise to the reader. Poke tongue | ;-P

[EDIT: document.getElementsByName not supported in IE6 Frown | :(

]
[EDIT2: function getHiddenValue - add the keyword 'var' before 'chosenValue' - chrmoe doesn't like us not declaring it as a var before asigning something to it]

modified on Wednesday, December 30, 2009 7:52 PM

thebiostyle30-Dec-09 13:59

30-Dec-09 13:59

Okay, so I mainly use Firefox, and I posted on the homepage of the site, the our site is best viewed with Firefox, so thats okay, as long as in those other browsers that it was able to view radio buttons then it will do just fine.   But when I edited it to fit the actual results page, it submitted no info.   So, here is both files, with what I have edited to fit....

poll.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>Poll</title>
<script type="text/javascript">
function byId(e){return document.getElementById(e);}
function byName(e){return document.getElementsByName(e);}
function changeState(el, stateMod){el.state ^= stateMod;}

function updateImg(el)
{
     imgs = Array("rb1.png", "rb2.png", "rb3.png", "rb4.png");
     el.src = imgs[el.state];
}

function drawRadioGroup(groupName)
{
     var elements, i, count;
     elements = byName(groupName);
     count = elements.length;
     for (i=0; i<count; i++)
          updateImg(elements[i]);
}

function doClick(el)
{
     var elements, i, count;
     elements = byName(el.name);
     for (i=0; i<elements.length; i++)
     {
          elements[i].state &= 1;
          updateImg(elements[i]);
     }
     el.state |= 2;
     updateImg(el);
}

function getRadioGroupValue(groupName)
{
     result = "none selected";
     elements = byName(groupName);
     count = elements.length;
     for (i=0; i<count; i++)
     {
          if (elements[i].state >= 2)
               result = elements[i].value;
     }
     return result;
}

function addRadioButton(groupName, optionValue, labelValue, tgtContainer)
{
     lblObj = document.createElement("label");
     lblText = document.createTextNode(labelValue);

     // create the miage object
     imgObj = document.createElement("img");
     imgObj.name = groupName;
     imgObj.src = "rb1.png";
     imgObj.width = "12";
     imgObj.height = "12";
     imgObj.value = optionValue;
     imgObj.onmouseout =   function(){ changeState(this, 1); updateImg(this); }   //onmouseout="changeState(this, 1); updateImg(this)"
     imgObj.onmouseover = function(){ changeState(this, 1); updateImg(this); }
     imgObj.onclick = function(){doClick(this);}

     lblObj.appendChild(imgObj);          // add the image to the label object
     lblObj.appendChild(lblText);     // add the label text after the img - text appears to the right of the image

     tgtContainer.appendChild(lblObj);     // add the label object to the target container

     // add the img object to the target container
     newLineObj = document.createElement("br");     // and add a new-line, ready for the next item to be added
     tgtContainer.appendChild(newLineObj);
}

function createGroup(groupName)
{
     choices = Array("Firefox", "Chrome", "Navigator", "Safari", "Opera", "Internet Explorer");
     for (i=0; i<choices.length; i++)
          addRadioButton(groupName, choices[i], choices[i], byId("radioHolder"));
}

function getHiddenValue()
{
     chosenValue = getRadioGroupValue("radioGroup1");
     byId("pollChoice").value = chosenValue;
     return 1;
}

function test2(){alert(getRadioGroupValue("radioGroup1"));}
</script>
</head>
<body onload="createGroup('radioGroup1', 10);">
<span style="color: rgb(255, 0, 0);">
<h3>What is your Preferred browser?</h3>
     <div id = "radioHolder"></div>
      <form action="Poll Results.php" method="post" onsubmit="getHiddenValue();">
            <input type="hidden" name="vote" id="pollChoice" value="<?php echo $i; ?>"/>
           <br /><input type="submit" value="Vote" style="border-color: rgb(255, 0, 0); color: rgb(255, 0, 0); font-family: Arial; font-weight: bold; font-size: 12px; background-color: rgb(0, 0, 0);"><br/></span>
</body>
</html>
--------------------------------------------------------------------------------------------------------

Poll Results.php
--------------------------------------------------------------------------------------------------------
<?php
$file = "votes.txt";
$title = "What is your Preferred Browser?";
$choices = array("Firefox",
"Chrome",
"Navigator",
"Safari",
"Opera",
"Inernet Explorer");
?>
<body>
<h3 style="color: rgb(255, 0, 0);">Poll Results</h3>
<p><span style="color: rgb(255, 0, 0);">
<?php

   $votes = file($file);
   $total = 0;
   $vote = $_POST["vote"];

   if(isset($vote)){
      $votes[$vote] = $votes[$vote]+1;
   }

   $handle = fopen($file,"w");

   foreach($votes as $v){
      $total += $v;
      fputs($handle,chop($v)."\n");
   }

   fclose($handle);

   for($i=0;$i<count($choices);$i++){
      echo "{$choices[$i]} has {$votes[$i]} votes.<br />";
   }
?>
</p>
<p>Total: <?php echo $total; ?> votes.</span></p>
</body>
--------------------------------------------------------------------------------------------------------

Thanks, hopefully you can fix it so that it will work.

enhzflep31-Dec-09 7:04

31-Dec-09 7:04

Hey, do you realize that you filled the hidden value with a meaningless value (and one coming from an undefined variable)?

<input type="hidden" name="vote" id="pollChoice" value="<?php echo $i; ?>"/>

Did you also notice that you've forgotten to close the form tag?

Also, perhaps you forgot to check in "Poll Results.php", but the chosen value is being submitted perfectly in FF, Chrome & Opera. Poke tongue | ;-P

(Try this addition to "Poll Results.php", after retrieving the POST value - echo $vote;) Works every time...

However, "Poll Results.php" is another story altogether. That poor file should be taken out into a field and shot!
Have you had a look at "votes.txt" - it's nothing but a whole bunch of new-line separated 1s. Laugh | :laugh:

That's some seriously flawed logic in there my friend. D'Oh! | :doh:

Surely it would be easier to simply add the chosen option(in text) to the file each time a vote is made, followed by adding up the number of instances of each.
Or, you could have a file for each of the options - that only held an integer. When an option is chosen, the corresponding file gets opened and the integer in it incremented. That'll give performance that will be just the same for vote number 1, and the 100,000,000th vote.

thebiostyle31-Dec-09 7:13

31-Dec-09 7:13

I don't understand this... "filled the hidden value with a meaningless value (and one coming from an undefined variable)?"

Also, how would I fix this..."However, "Poll Results.php" is another story altogether. That poor file should be taken out into a field and shot!
Have you had a look at "votes.txt" - it's nothing but a whole bunch of new-line separated 1s.
That's some seriously flawed logic in there my friend."

Thanks. I am truely greatful.

enhzflep31-Dec-09 13:05

31-Dec-09 13:05

1] Perhaps I can put this another way, which do you find clearer, and 'better'?
(a)

<input type="hidden" name="vote" id="pollChoice" value=""/>

(b)

<input type="hidden" name="vote" id="pollChoice" value="thisIsJustSomeRandomJunkValue"/>

2](

)
(1) Get code
(2) get gun
(3) Find quiet place
(4) Shoot code(repeatedly) in the <body>

Ha, ha - no, to be serious - are you familiar with the term "desk-check", it seems it's gone out of fashion these days, but once upon a time we used to run programs first (before typing) by hand with pen and paper. This forces you to think about the code you're writing and to examine it logically.
As it stands, the logic in your "Poll Results.php" file is terribly flawed. Have you tried writing pseudo-code, then converting that to php - or how about converting your current code to pseudo code WTF | :WTF:

- then you'll see why I've been having a bit of a laugh with the whole thing.

It is a problem of logic from here. That's up to you. I decline any further invitation to fix it.
Rose | [Rose]

thebiostyle31-Dec-09 18:13

Re: Radio Buttons [modified]

31-Dec-09 18:13

Okay, sorry, but I just started with PHP in November, and I just got a good book on it, but it doesn't have polls in it, I made the poll from a tutorial, and it worked fine originally, but now it doesn't seem to work. Sorry. But now I am going back to an earlier post of which stated this... "Surely it would be easier to simply add the chosen option(in text) to the file each time a vote is made, followed by adding up the number of instances of each." I am now asking how I would do that. Thanks, and hopefully you will make an exception this once. Thanks!!

enhzflep31-Dec-09 19:41

31-Dec-09 19:41

No need to apologize - (not for you anyway - sorry if I was unpleasant)

Yeah, I found php a bit interesting at first - but I found out that I could interface to COM objects so long as the server was running windows (linux xampps doesn't support COM objects, while the windows one does) This was of interest to me, because this means that you can create a website that (for example) that creates office documents based on user entered data, before making the custom and newly created document available for download. (word, excel, powerpoint, access etc)

But in my case, I had a desire to interface to a school/university timetabling program (syllabus+), that as luck would have it offered it's own com server. The massive advantage being that anyone could view a timetable so long as they had a network(or internet) accessible pc(or phone or ps3, etc). Thus freeing users from having to have the software installed on their machines.

Anyhow, the point is that with a large enough motivation I made a start with php back around August sometime(i forget), and have since gone on to write a reasonably functional pdf creation class in php. I realize that there are others available - many for free, though none did what I wanted AND were entirely free of copyright restrictions. I now have some code that will create (semi-optimized) pdfs, with images and attachments that runs under both windows and linux.

Without the help of others, I'd know very little. $Shucks | :-\$

Try this on for size:
"Poll Results.php"

<body>
<h3 style="color: rgb(255, 0, 0);">Poll Results</h3>
	<span style="color: rgb(255, 0, 0);">
	  <p>
		<?php
		   $choices = array("Firefox", "Chrome", "Navigator", "Safari", "Opera", "Internet Explorer");
		   $file = "votes.txt";
		   $total = 0;
		   $vote = $_POST["vote"];

		   print("You voted for: $vote<br>");

		   $handle = fopen($file,"a+");
		   $outStr = sprintf("%s\r\n", $vote);
		   fputs($handle, $outStr);
		   fclose($handle);
		   
		   $votes = file($file);
		   $i = 0;
		   $totals = array("Firefox"=>0, "Chrome"=>0, "Navigator"=>0, "Safari"=>0, "Opera"=>0, "Internet Explorer"=>0);
		   $ffx=0; $chr=0; $nav=0; $saf=0; $opr=0; $iex=0;
		   foreach ($votes as $curLine)
		   {
				if (!strcmp($curLine, "Firefox\r\n"))
					$ffx++;
				if (!strcmp($curLine, "Chrome\r\n"))
					$chr++;
				if (!strcmp($curLine, "Navigator\r\n"))
					$nav++;
				if (!strcmp($curLine, "Safari\r\n"))
					$saf++;
				if (!strcmp($curLine, "Opera\r\n"))
					$opr++;
				if (!strcmp($curLine, "Internet Explorer\r\n"))
					$iex++;
				$i++;	
		   }
	      printf("%s has %d votes<br>", $choices[0], $ffx);
	      printf("%s has %d votes<br>", $choices[1], $chr);
	      printf("%s has %d votes<br>", $choices[2], $nav);
	      printf("%s has %d votes<br>", $choices[3], $saf);
	      printf("%s has %d votes<br>", $choices[4], $opr);
	      printf("%s has %d votes<br>", $choices[5], $iex);
		?>
	  </p>
    </span>
    <p>Total: <?php echo $i; ?> votes.</p>
</body>

Produces an output of (after a few runs):

Poll Results

You voted for: Opera
Firefox has 0 votes
Chrome has 1 votes
Navigator has 0 votes
Safari has 1 votes
Opera has 1 votes
Internet Explorer has 0 votes

Total: 3 votes.

And creates a file "votes.txt" with the following content:
Chrome
Safari
Opera

Yeah, I know it's not particularly extensible nor neat - but hey look at the time of year - I never did program very well when drunk Laugh | :laugh:

thebiostyle31-Dec-09 21:44