Validation for PayPal buttons

I have client that uses PayPal and I built several buttons for the products sold. There are several options that the customer can choose for the first dropdown. Once that option is chosen we need the next set of option dropdowns to match with the first choice. If they don’t then an error message is displayed. Example -
Basic baseball bat chosen at $135.00
Next dropdown is for size - this is fine to leave without validation
Next dropdown is for Barrel Color - since the basic bat was chosen the customer cannot choose a custom color
Next dropdown is for Handle Color - since the basic bat was chosen the customer cannot choose a custom color
Next dropdown is for Colored Band - since the basic bat was chosen the customer cannot choose a custom color
Next drops is for Custom Laser Etching - since base bat was chosen the customer cannot choose laser etching

Under the first dropdown for the bat type itself we have
Basic Bat and price
Basic Bat and custom laser etching and price
Basic Bat and custom laser etching and band color and price

This has a total of 8 options to choose from. How do I get this to validate on a button that was created at Paypal site? I don’t know Javascript so can’t write the code myself. Is there something out there that I can tweak to work the way I want? I am lost as to where to go from here.

This was supposed to be a very simple e-commerce solution using Paypal.

Any help or guidance would be appreciated.

The site is http://haagbatco.com/order.html

I understand. The client is happy with how it works for now. We will see if as the company grows, there is a better solution for their e-commerce needs other than PayPal.

dogFang - I did remove the the aSel[3] lines and it seems to be working as the client wants. What is your opinion on graying out certain lines in the dropdown for handle color? Will this be more complicated than necessary? Just curious.

oddz - I did not know at the time that I took on the project that it would be this complicated. The client kept changing his mind about the colors that he was going to have as options. I believe I will go with things as they are for now. I will remove the aSel[3] since this seems to control the handle color option so that it is availabile for the customer. If the client gets something that is out of the norm, they can explain to the customer that there are only 4 color options for the handle in the basic bat. Or…I could add another dropdown that only has the 4 color options for the basic bat and using the logic of the code add an aSel[#} to it. Or…I can add wording so that the customer understands better that there are only 4 color options for the handle in the basic bat. I did not realize that it was going to get this complicated. I think next time I have a project like this, I might have to outsource for anything more complicated than what I can handle. I do thank you for letting me know that is way beyond my capabilities.

Has this been resolved?

Ok I guess I have to figure this out myself…looking at the code aSel[2].disabled = aSel[3].disabled = aSel[4].disabled = f.os5.disabled = true; I believe that aSel[2] is for Barrel color, aSel[3] is for Handle color, aSel[4] is for Band color and f.os5 is for the laser etched lettering. If I take out aSel[3] this enables the handle color dropdown. However on the case lines I am not sure if I need to remove the aSel[3] from each of them. If this is true then I will remove all of them…but I need to see if there is a way to gray out part of the list only for the basic bats. The actual custom colors are only available on the custom bats themselves not on the basic bats. I have a feeling that more code will be needed to gray out the custom colors. Could someone please let me know if I am on the right path? PLEASE???

Could dogFang or someone please tell me what to change in the code that dogFang did for me that would enable the handle color on the 4 basic bat combos. The customer can choose a custom color for the handle just not a custom color on the barrel. However the only colors that are available on the basic bat for the handle are cherry, dark brown, black, or natural. I don’t know if the other colors can be grayed out for the 4 basic bat combos. Please help me as I need to get this fixed for the client. Thanks.

Thank you so much dogFang. This is exactly what I needed and it works. I really appreciate your help on this.

How do you determine the options available at each depth? There needs to be some type of programmatic logic to resolve this option has these options and when you click on this option the combination yields these options for this options and so on. Looking at your code it looks like there isn’t any logic for that. That would be the first and most important issue.

If what I discussed above is all managed by PayPal you will need to research a way to get the data from PayPal using an API of some sort that PayPal provides. For that you are going to need a server-side script to proxy the request which can than be manipulated using JavaScript.

The other option is to hard code all the relational logic into the page itself. The only downside of that is if anything changes or is added the page would need to be updated. So this is not ideal for a site continuously adding products.

This is by no means a simple task. Especially for someone unfamiliar with programming.

Probably not what you were hoping to hear but its much more complex than the simple answer given considering all the variables and edge cases for your particular situation.

edit:

I have quit a bit experience using the PayPal API (payments) but I don’t believe PayPal offers an API that exposes products for a store front. So the only option is to hard code the logic directly or manage the products on the site over PayPal where everything can be stored in the database. Seems like it would be more work than what the job pays though.

If it were my client I would just tell them it can’t be done without complete redevelopment. Have they made me aware its something they wanted before building the site it could have been factored into the development time and strategy at that time. Which would have probably changed the costs drastically.

That is what I would do because it seems like more work than the job is worth.

Could the code also be commented so I know what it is doing. I cannot learn if I don’t know what the code means and what is happening. Again thanks.

You can visually gray out the options, but not prevent them from being selectable in IE.
It would be necessary to rewrite the options dynamically according to other selections made. It’s doable, but could quickly become complicated and difficult to maintain.

I really need help here as the client needs this fixed right away. Please could someone help me get this corrected. Thanks.

<script type="text/javascript">
window.onload = function() {
var aForm = document.getElementsByTagName('form');
for(var i=0; i<aForm.length; i++) {
    aForm[i].onsubmit = function() {return checkForm(this);};
    aForm[i].reset();
    var aSel = aForm[i].getElementsByTagName('select');
    aSel[0].onchange = function() {changeDisabled(this.form, this.selectedIndex);};
    changeDisabled(aForm[i], aSel[0].selectedIndex);
    }
};

function changeDisabled(f, idx) {
var aSel = f.getElementsByTagName('select');
aSel[2].disabled = aSel[3].disabled = aSel[4].disabled = f.os5.disabled = true;
switch (idx){
    case 0:
        aSel[2].selectedIndex = aSel[3].selectedIndex = aSel[4].selectedIndex = 0;
        f.os5.value = '';
        break;
    case 1:
        aSel[2].selectedIndex = aSel[3].selectedIndex = 0;
        f.os5.value = '';
        aSel[4].disabled = false;
        break;
    case 2:
        aSel[2].selectedIndex = aSel[3].selectedIndex = aSel[4].selectedIndex = 0;
        f.os5.disabled = false;
        break;
    case 3:
        aSel[2].selectedIndex = aSel[3].selectedIndex = 0;
        aSel[4].disabled = f.os5.disabled = false;
        break;
    case 4:
        aSel[4].selectedIndex = 0;
        f.os5.value = '';
        aSel[2].disabled = aSel[3].disabled = false;
        break;
    case 5:
        f.os5.value = '';
        aSel[2].disabled = aSel[3].disabled = aSel[4].disabled = false;
        break;
    case 6:
        aSel[4].selectedIndex = 0;
        aSel[2].disabled = aSel[3].disabled = f.os5.disabled = false;
        break;
    case 7:
        aSel[2].disabled = aSel[3].disabled = aSel[4].disabled = f.os5.disabled = false;
        break;
    }
}

function checkForm(f) {
var error = '';
var aSel = f.getElementsByTagName('select');
var idx = aSel[0].selectedIndex;
if(idx > 3) {
    if(aSel[2].selectedIndex == 0) {error = 'Select Barrel color';}
    if(aSel[3].selectedIndex == 0) {error = 'Select Handle color';}
}
switch (idx){
    case 0:
        break;
    case 1:
        if(aSel[4].selectedIndex == 0) {error = 'Select Band';}
        break;
    case 2:
        if(f.os5.value == '') {error = 'Enter etching text';}
        break;
    case 3:
        if(aSel[4].selectedIndex == 0) {error = 'Select Band';}
        if(f.os5.value == '') {error = 'Enter etching text';}
        break;
    case 4:
        break;
    case 5:
        if(aSel[4].selectedIndex == 0) {error = 'Select Band';}
        break;
    case 6:
        if(f.os5.value == '') {error = 'Enter etching text';}
        break;
    case 7:
        if(aSel[4].selectedIndex == 0) {error = 'Select Band';}
        if(f.os5.value == '') {error = 'Enter etching text';}
        break;
    }
if(error=='') {return true;}
else {alert(error); return false;}
}
</script>

Maybe I have this in the wrong section or maybe I am not being clear on what I am looking for. There has to be some way through javascript or some other script to validate that what the customer chooses will effect other choices in the dropdowns. Please can someone either help me with this or direct me to the proper part of the forums that can help me figure this out. Thanks.