Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Radio button requires text field

Radio button requires text field

Locked

Views: 1,826

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
10 May 2010, 2:00 PM
#1
bigdrunk avatar

bigdrunk

New Zenner

Join Date:
Mar 2009
Posts:
40
Plugin Contributions:
0

Radio button requires text field

I have a product with two options, both selected by a radio button. One of the options is for custom text to appear on the product. Is there a way that if a customer selects option 2 then the text becomes a required field. Or if they select option 1 then the text box can't be filled in?

8 Jun 2010, 5:50 PM
#2
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

I too am looking for this feature. Has anyone figured this out?

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store

2 Jul 2010, 1:45 PM
#4
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

Thanks for the link!

I actually figured this out just using some simple javascript. The file I edited was:

 Rootofstore/includes/templates/YOURTEMPLATE/templates/[B]"tpl_product_info_display.php"[/B]. 

**Keep in mind that this only works with products that have the specific attributes you have to check. ** In my case, I had a few text fields that needed to be filled ONLY if they checked a certain radio option above those fields.

I added this to the bottom of the file:

<script language="JavaScript">
	new validateForm(document.forms['cart_quantity']);
</script>

At the top of the file, I added the javascript needed to test the form. If you look at the source of your product page, you can find the "name" of the form element that you need to check. The things in red are the things you have to customize. Actually, the conditions themselves you should customize to how you need it:

<script language="JavaScript" type="text/javascript">
 function validateForm(oForm)
 {
 	//oForm refers to the form which you want to validate
 	oForm.onsubmit = function() // attach the function to onsubmit event
 	{
 		if(oForm.elements[[B]'attrib-16-107'[/B]].checked == false && oForm.elements['id[[B]txt_14[/B]]'].value == '')
		{
			alert("Please enter a name for your Registrant.");
			return false;
		}
		else if(oForm.elements[[B]'attrib-16-107'[/B]].checked == false  && oForm.elements['id[[B]txt_15[/B]]'].value == '')
		{
			alert("Please enter an email for your Registrant.");
			return false;
		}
		else if(oForm.elements[[B]'attrib-16-107'[/B]].checked == false && oForm.elements['id[[B]txt_21[/B]]'].value == '')
		{
			alert("Please enter a phone number for your Registrant.");
			return false;
		}
		else if(oForm.elements[[B]'attrib-16-107'[/B]].checked == false && oForm.elements['id[[B]txt_17[/B]]'].value == '')
		{
			alert("Please enter a street address for your Registrant.");
			return false;
		}
		else{
			return true;	
		}
 	}
 }
 </script>

Hope this helps!

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store

2 Jul 2010, 3:20 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Radio button requires text field

Nice script, as long as the user has javascript enabled. I presume that if js is disabled, there will be no checking done and the user will be able to add any combination to their cart.

Also, there is a recommended procedure for including javascript in pages without adding it directly to a PHP file - see the tutorials.

2 Jul 2010, 3:24 PM
#6
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

Yes, there's that caveat. Though another feature on my site requires that as well, so I don't mind it.

And do you have a link to said tutorial?

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store

2 Jul 2010, 3:40 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Radio button requires text field

I guess the info is not in the tutorials. I found it in the wiki by searching for "javascript":
http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Javascript

2 Jul 2010, 3:43 PM
#8
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

Nice! Thanks for the link. This is the first time I've heard of this information and I searched a ton through the threads.

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store

2 Jul 2010, 6:32 PM
#10
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

Possibly. I know I found about two dozen threads relating to "conditional attributes" that either had 0 replies or didn't have a solution, and about 2 that had a final reply with "I found a solution!" and never actually posted anything.

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store

2 Jul 2010, 7:14 PM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Radio button requires text field

Javascript file inclusion is a general-purpose topic that has come up in many different specific discussions, not related to attributes.

2 Jul 2010, 7:17 PM
#12
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

Re: Radio button requires text field

Right, which is why I never saw it. Hopefully this thread will be linked to anyone trying to search for conditional attributes now.

Vu Nguyen | Multimedia Developer & Webmaster
Robotics Academy/Robomatter
Robomatter Robotics Education Store