close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

adding radio buttons to add to cart button form

Thread began 4/24/2015 12:00 pm by marsha431457 | Last modified 4/29/2015 2:44 pm by Ray Borduin | 1314 views | 14 replies |

marsha431457

adding radio buttons to add to cart button form

I have added 2 radio buttons to my add to cart form, and now I need to know how to make it so they qualify the fields under them. I simply added them to the form where they need to be: you can view my test page at: http://www.bandofhonor.com/tag_single_rbtest.php (left side, choice between Inscription and Logo)

The actual working page which needs these buttons can be seen at: http://www.bandofhonor.com/tag_single.php. We need to force the customer to CHOOSE between Inscription and Logo on side 1. Right now it is possible for them to choose both...

I tried to find documentation on this but couldn't find anything that matches my situation.

Sign in to reply to this post

Ray BorduinWebAssist

If they both have the same name attribute, then only one will be able to be selected at a time.

Sign in to reply to this post

marsha431457

Yes they do have the same name attribute, but I am trying to make the part underneath each one where they either fill in an inscription or choose a logo so that they can only do one or the other. It actually works the way I have it now, but it is possible for them to mistakenly put in an inscription AND choose a logo other than "None".

This will become a bigger issue on the double tags order page where they have two 2-sided tags to fill out choices on.

Sign in to reply to this post

Ray BorduinWebAssist

I see... this would require some hand written javascript code to pull off.

You would add an onclick event to both radio buttons that calls a javascript function. That function would read which radio was selected and then enable or disable the appropriate form elements on the page. There is no way to do this without hand coding, but it is only a couple of lines of code and shouldn't be too difficult to pull off.

Sign in to reply to this post

marsha431457

I suspected it would be something like that. I am fairly good at html coding but not great at java or php. Most of our other clients have simple needs and this is our only shopping cart client. Unfortunately even though there are really only 2 products the variables are difficult to quantify and capture. I have tried to keep it simple! So I guess now I will need to figure out the javascript. At least it works the way it is, even there is potential for mistakes. If you have any suggestions it would be appreciated...

Our client is a police officer. At least he is one of the nice ones!

Sign in to reply to this post

Ray BorduinWebAssist

If you attach a copy of the page so I can look at it, I can give more precise guidance and maybe even whip up a script for you as a starting point.

Sign in to reply to this post

marsha431457

That would be much appreciated. There are 2 pages with this problem, I started with the easier one! It's attached.

Attached Files
tag_single.php
Sign in to reply to this post

Ray BorduinWebAssist

You could add this to each radio button: onclick="enableDisableFields()"

Then make sure you add an id property that matches the name for all of the form elements you want to be enabled or disabled. Then add the javascript to page similar to:

<script>
function enableDisableFields() {
if (document.getElementById("side1_0").checked) {
document.getElementById("boh_2_Inscription1_Add").setAttribute('disabled','false');
document.getElementById("boh_2_Inscription2_Add").setAttribute('disabled','false');
document.getElementById("boh_2_Inscription3_Add").setAttribute('disabled','false');
document.getElementById("boh_2_Logo_Add").setAttribute('disabled','true');
document.getElementById("boh_2_Logo_Add").selectedIndex = 0;
} else {
document.getElementById("boh_2_Inscription1_Add").setAttribute('disabled','true');
document.getElementById("boh_2_Inscription2_Add").setAttribute('disabled','true');
document.getElementById("boh_2_Inscription3_Add").setAttribute('disabled','true');
document.getElementById("boh_2_Inscription1_Add").value = "";
document.getElementById("boh_2_Inscription2_Add").value = "";
document.getElementById("boh_2_Inscription3_Add").value = "";
document.getElementById("boh_2_Logo_Add").setAttribute('disabled','false');
}
}
</script>

I haven't tested this script, but it should be close and hopefully will get you on your way so you can get it working from here.

Sign in to reply to this post

marsha431457

OK, good. I just looked at the code for the radio buttons input, and the id property right now reads: id="side1_0" on the first button and: id="side1_1" on the second button. Do I need to make those both the same, such as: id="side1_0" or simply: id="side1"? Also there are three lines of inscription controlled by one radio button and one dropdown menu controlled by the other one, I guess I need to add this same id property to all of these fields?

Also do I put the javascript right there in the body, or within the head tag?

Sign in to reply to this post

Ray BorduinWebAssist

The ID values of the two radios should remain different as they are.

Yes, you would add all of the fields to the list using the same syntax of the three I added.

You can add the javascript inside a <script> tag to the bottom of the page just before the </body>

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...