Linux, Apache, MySQL, PHP

24-Dec-09 8:56

Okay, I was working on construction a Poll in PHP for the index page of my site, and came across these radio buttons of which ruin the vibe of the stylesheet.... They don't look good with the rest of the site. So I made four button "graphics" to use as the buttons... I will explain them, and add links to them.... just want you to help me on coding them into the page... to where I can copy and paste the code, and then save, and test the page and it should work like I have explained..... Thanks in advance...

So, The first button is the button each radio button should display once the page has loaded...
here is the link... "First Button"

The second button should appear once the user hovers over the radio button...
here is the link... "Second Button"

The third button is the button that shall appear once the user has clicked the radio button, and moved the mouse off it...
here is the link... "Third Button"

The fourth button is the button that shall appear once the user has clicked on the radio button...
here is the link... "Fourth Button"

Thank-You Very Much for your time and consideration. I hope to have this done today, so it can be up for Christmas... Thanks.

abushahin28-Dec-09 7:47

28-Dec-09 7:47

hey dont quite understand what you mean, if you mean that you wanna use ur png images as radio buttons the answer is no but if wanna style the radio buttons you can do that using css or the inline styles. however if you must use the images there is something called but thatll act like a submit button. dont forget youll have to put all of those in a form and use javascript for each as one form only submits to one handling page. this isnt the best idea as different browsers may not support it

thebiostyle28-Dec-09 10:34

28-Dec-09 10:34

Okay, so would it be possible to use those images to "Style" the radio buttons... if not, can you please tell me how. Thanks.

cjoki29-Dec-09 4:32

cjoki

29-Dec-09 4:32

I think you can fake it by using a hidden input and setting its value based on the image that is selected. I'm a little under the weather right now, but I think that the img tag may have the onclick, onmouseover, etc... that you would need to implement the logic to fake a radio button set.

you may even find some free source out in the net that will provide you with a base to start from.

-- All the best!

abushahin31-Dec-09 7:45

31-Dec-09 7:45

Ok based on what ive seen around it is possible but it differs from browser to browser you can use the style attribute but this doesnt have any effect on the latest firefox browser or chrome but ie has no probs with it. You can have a look at a preview here but if your visiting with firefox you wont see any change try it with ie. and also if you use javascript you can change it a greater deal but dont rely on javascript as users are able to turn it off. Take a look at the link provided and also the link in that page.

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