Radio Buttons

enhzflep

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

Lost User

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.

enhzflep

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?

Lost User

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.

enhzflep

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

Lost User

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!

enhzflep

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. ;P [EDIT: document.getElementsByName not supported in IE6 :( ] [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

Lost User · modified on Wednesday, December 30, 2009 7:52 PM

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

enhzflep

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

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. ;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: That's some seriously flawed logic in there my friend. :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.

Lost User

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.

abushahin

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.

abushahin

enhzflep

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

(b)

2]( :laugh: ) (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: - 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:

Lost User

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

enhzflep

:-O 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. :-\ 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

Lost User

Thank you very much for all your help. I couldn't get anyone else to actually put the time and effort into helping me with this, thanks very much. It's currently 3:43 AM here, on the 1st of January, and the poll is finally finished. Thanks!!