Forums

Multiple Sets of Radio Buttons - best practice.

lcbarker 05 Feb, 2012
I'm creating a registration form for our annual conference. It's the last piece, and I'm really close. But ...

Registrants need to select 1 choice out of 18. There are 6 categories (ie individual, student, staff etc) and 3 different day possibilities. I created a radio box element for the selection. Putting the 18 choices was not a problem, but I'd like to visually separate each set of 3 so that it's more obvious where the individual is to look. I've tried putting a hard return in the options between the sets, but that gets converted into a "=" and creates a radio button without text beside it. Anyone know of how I can add a space between each set of three items?

A second issue: The radio box return a 4 letter code for the item selected. Works fine. But I also need to have the dollar value of the fee related to that code available for the Show Thanks Message. Last year I created an html page for the registration. (This year I want to switch to Joomla and thus the need for Chronoforms.) On that stand alone page I include a function in the header that would map the Rgfee to the Rgcategory so that the value would be available in a variable. Then at the beginning of the radio box section the function was assigned to onclick. How do I do that now? I've placed the code I used last year into a Load JS element in the On Load section. But I don't where to put the calling of the function.

Sample of the function:
<script>
var Rgcategory=""; var Rgfee=""; var letter="";
function getRadios(what){
// get the Rgcategory value
j=what.Rgcategory.length; 
	for (i=0; i<j; i++){
		if(what.Rgcategory[i].checked) var Rgcategory = what.Rgcategory[i].value
		if(Rgcategory=="IED1")
			{ Rgfee = "30";}
		else if(Rgcategory=="IED2")
			{ Rgfee = "30";}
		else if(Rgcategory=="IEFA")
			{ Rgfee = "50";}

etc - 14 more categories

			else if(Rgcategory=="TOFA")
			{ Rgfee = "0";}
	}
what.buttons.value = (Rgcategory+', '+Rgfee)
what.Rgfee.value = (Rgfee)
}
</script>


Thanks for your help.

Les
GreyHead 05 Feb, 2012
Hi Les,

I don't know of any HTML way to sub-group radio buttons. I guess that it's probably quite easy to use JavaScript to link three groups together so that selecting one unselects the others - but I've never tried to code it or seen it done.

There's a Dynamic drop-down action in ChronoForms that does something similar. Change the first drop-down and the options in the second one change - that would give you the funtionality but not the same look.

What is the HTML for the radio button group that you want to use the script with?

Bob
lcbarker 05 Feb, 2012
Hi Bob,

This is the beginning of the html. It has the IED1 and IED2 also found in the script portion.

<div class="ccms_form_element cfdiv_custom" id="input_id_28_container_div"><h3>3.  Registration Category and Day(s) - (until March 16th)<br />
Choose one.</h3><div class="clear"></div><div id="error-message-input_custom_28"></div></div><div class="ccms_form_element cfdiv_radio label_over radios_over" id="rgcategory_container_div"><input type="hidden" name="Rgcategory" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="Rgcategory" id="rgcategory_ied1" title="" value="IED1" class="validate['required']" />
<label for="rgcategory_ied1">Individual -- Not receiving CEU credits -- Friday - $30</label>
<input type="radio" name="Rgcategory" id="rgcategory_ied2" title="" value="IED2" class="validate['required']" />


I had forgotten about having access to the html. I tried to put a <br />; and then a <div></div>; and then a <p> </p> between two sections, but none of those created a space between the radio choices.

In last year's form I called the function from this code
<div onClick='getRadios(document.ConferenceRegistrationForm)' /* clicking division */>

just prior to the first <input type="radio" ...> tag which would have matched the Rgcategory with a Rgfee according to the script.

So I tried putting that same code before the first <input type="radio" ...> tag but to know apparent avail. I say apparent because I don't know if it worked or not. The debug array did not show a RgFee in the list of fields at all, so I don't know if Rgfee wasn't created, wasn't populated, or is still in memory but just doesn't show.

Hope this helps. Thanks.

Les
lcbarker 05 Feb, 2012
Thanks to Bob's help above and to Bob's exchange with Anthony in "CF4 form not submitting to dbase when using custom code", I have the most important part of my two-part questions solved - how to use code to assign a fee value based on the registration code.

The first thing I needed to do was to create a field for the fee. Since people weren't going input it I finally determined I needed to use a Hidden Field. It took me a while to determine that 'Field Name' in the Hidden Field form meant the name of the field I was creating. So I named it "Cffee".

Then I went into Events and put in the following code. I assigned the Rgcategory field value to a variable. (This I learned from Bob's correspondence with Anthony.) A second key was learning from Anthony's backup file that the way to process this was with php. I then was able to search until I found the switch command and worked at it from there. The script now produces the proper matches that I require. So thank you Bob and Anthony.

<?php

$regCategory = $_POST['Rgcategory'];

switch ($regCategory)
 {
	case "IED1":
		$Rgfee = "30";
		echo $Rgfee;
		break;
	case "IED2":
		$Rgfee = "30";
		echo $Rgfee;
		break;
	case "IEFA":
		$Rgfee = "50";
		echo $Rgfee;
		break;
	case "PED1":
		$Rgfee = "60";
		echo $Rgfee;
		break;
	case "PED2":
		$Rgfee = "60";
		echo $Rgfee;
		break;
	case "PEFA":
		$Rgfee = "110";
		echo $Rgfee;
		break;
	case "SED1":
		$Rgfee = "20";
		echo $Rgfee;
		break;
	case "SED2":
		$Rgfee = "20";
		echo $Rgfee;
		break;
	case "SEFA":
		$Rgfee = "30";
		echo $Rgfee;
		break;
	case "ROD1":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "ROD2":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "ROFA":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "KOD1":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "KOD2":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "KOFA":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "TOD1":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "TOD2":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	case "TOFA":
		$Rgfee = "0";
		echo $Rgfee;
		break;
	default:
		$Rgfee = "0";
		echo $Rgfee;
 }

$form->data['Cffee'] = $Rgfee;


?>
lcbarker 05 Feb, 2012
Okay, I'm working on the first part about creating space between every third radio button. I think this should work with the use of a css class. I placed a 'Load CSS' event in the 'On Load' section and created a class :
.rbbeforesection {margin-top:10px;}

which I placed in that event, and then inserted this code:
class = "rbbeforesection" 

in the html for both the "<label " and "<input " statements for each radio button. When I do a Frontend view there is no change. BUT when I go back to the html code, the class commands are not there. They have vanished. (Of course I make sure I saved the form before I viewed it.)

Does anyone know why the html code is not sticking? If it did, I believe this would solve this issue.

Thanks

Les
GreyHead 06 Feb, 2012
Hi Les,

ChronoForms shouldn't delete anything from the Custom Code action :-(

The class attribute needs to be without spaces
class="rbbeforesection" 
and it should be combined with any existing class attribute:
class="rbbeforesection validate['required']"


Please post a link to the form so I can take a quick look.

Bob
GreyHead 06 Feb, 2012
Hi Les,

Well done :-)

Just one side-comment. If the value isn't going to be displayed in the form then it's often easier to calculate it after the form is submitted using PHP in a Custom Code action.

Bob
This topic is locked and no more replies can be posted.