[RESOLVED] How to get JavaScript to generate os variables for my HTML form?

rafiakbar

*Please note: Honestly, I copy-pasted it from an asp-based site and modified the form according to my services. The site owner warned me it would cause problems as my site is Html-based only.

This form collects info of the customer who wishes to select add-ons that would be applied to their digital photos. Examples of add-ons:

Photo makeover

Add object or person

Crop image

Once a customer does the following:

select a Package (e.g. Photo Manipulation)

select one or more Add-ons (e.g. Add object or person, Cropping etc )

enter their details

hit the submit button

it then takes them to the PayPal checkout page where the total amount is shown.

Problem:

In the PayPal page, it shows t "Add object or person" as well as names of all the 5 Packages no matter what add-ons I select.

This is a problem since I will not know exactly what add-ons the customer has chosen after they make payment.

Specifics

In order to send the add-ons the customer selects I may have to use the onX and osX variables (Where X is a number starting with 0 and incrementing by 1 see below), These can be used to set options for the add-ons they select. The onO is the "option name" and os0 is the "option choice". So for example the two lines would be

Where:
Photo manipulation is new option name & Add object or person is new option choice.

Am I in the right direction James? If so, then I want point out that the first new option name is Photo manipulation & it has 8 new option choice. Similarly the other 3 new option names have more new option choice.

Do I plug in all these on the function part of the coding as well...maybe like this?

The function will do all the work to create the new numbers for the options. That was the point of the function. And your form name is "paypal" not "PP_paypal" (at least the one you listed above). I just used PP_form_name as an abbreviation for paypal form name

jamesbcox1980

The functions I gave you go into your header, and the calls I listed above go somewhere in the html document after the form in another <script> tag.

Oh, and no problem! I love problem solving....

UPDATE*** Actually, I jsut realized I failed to include some code to make sure there are already options on the form... If not it will fail. Need to make a slight adjustment (very small... you might not even see what I did):

Anyway, don't make any changes to these functions. Just add them to your header, and call them like the example above. Remember, the functions will know which osX and onX numbers to use.

rafiakbar

Thanks James!

And after some careful scrutiny (talking like an amateur) I found the missing link you have added:

PPopSort=[];

By the way, when you told me that I need to add the functions at the header and the calls at the end of the form inside a <script> tag, that is EXACTLY what a newbie like me needed to hear once. Thank you once again for being such a big help.

Why is it showing everything? Atleast its better than showing nothing heh heh.

Kind Regards,

Rafi

jamesbcox1980

It's probably not getting the "hidden" type attribute. Is there any way I can see this page in action? Without a test, I can't definitively determine what's wrong.

By the way, look closely at the statement which defines "_max". PPopSort=[]; was there just to throw you off my trail . Just kidding, that was one of the things I changed, but the important one was that I used the ternary operator "?:" to check if there was anything in the array yet. The "PPopSort=[];" statement just defines an empty array so that when I check to see if it has anything in it, it doesn't return "undefined".

rafiakbar

Hi James,

By the way, look closely at the statement which defines "_max". PPopSort=[]; was there just to throw you off my trail . Just kidding, that was one of the things I changed, but the important one was that I used the ternary operator "?:" to check if there was anything in the array yet. The "PPopSort=[];" statement just defines an empty array so that when I check to see if it has anything in it, it doesn't return "undefined".

That made me laugh. You've got a good sense of humor. I tried not to laugh as I'm at work.

Please fill out the form and press submit and you will see what comes up. The link to the form is below:

If you select a few add-ons, you'll see that on paypal's payment page its not just the ones you've selected, but every selection comes up.

Many thanks.

Rafi

jamesbcox1980

Oh, that's just what Paypal does. It's working just fine. When you create options, Paypal will display a list of them in the shopping-cart (as the call it). This is normal behavior and everything seems to be working perfectly.

EDIT*** Oh, I think see what you mean... It shows all options, no matter which you add, is that correct? Or are you just manually adding them right now?

jamesbcox1980

It's showing them all because you're manually adding them all. You're not checking for any conditions.

I figured you knew this part, so I just gave you the function to write the options with. You need to either add an event to check when the check boxes have changed or check them as the form is being submitted. You loop through all the check boxes and see which have been checked, and if one has, call newPPoption() for it.

rafiakbar

Only thing is Jame, once the customer makes a payment, I will receive an email confirmation that the customer paid a certain amount but not what add-ons they selected.

I want to know exactly which package and which add-ons they select. Remember I wanted to know how to get JavaScript to generate os variables for my HTML form so that I get to know exactly what the customer has chosen.

In the meantime I found a nice PHP script that will allow my customers to upload their images so I know I'm getting closer to my goal of launching this site and this is the last step now before optimizing the site for the web.

Look forward to hearing from you.

Rafi

rafiakbar

I think our messages are overlapping because we're posting them within minutes lol. I'm glad you noticed the issue. Below you said:

"It's showing them all because you're manually adding them all. You're not checking for any conditions. I figured you knew this part, You loop through all the check boxes and see which have been checked, and if one has, call newPPoption() for it."

I manually added them like a noob. I was thinking of adding it. But I don't know how. The only programming background I have apart from reading ebooks (seo, html and css) is c++ ... 10 years ago in a course in Uni (only learned how to write coding in C++ that displays a green clock).

James, please help me write this code please. If it works, in return for your time, I will be happy to retouch any photo you send. Oh and yes free of charge. Choose as many options as you want. You can send a photo of yourself or a friend/ relative, or pets, scenery etc.

Rafi

jamesbcox1980

I've given you the tool to generate the inputs. How you decide to use them when a box is checked will be up to you.

rafiakbar

Hi James

I'll get back to you on that once I've figured it out. Hey in the meantime send me a photo because I do owe you for the time you took to help me out. I've contact over 47 individual developers and you're the only person who actually helped which is why I appreciate your help so much.

Rafi

jamesbcox1980

Might I suggest using a type="button" instead of type="submit" for your form? that way you can perform a loop before the form is submitted, then you can document.forms["paypal"].submit(). Of course, you would need to include a <noscript> submit button.

When you create your loop, you need to figure out a way to determine which check box gets which option names. Once you have that figured out (look at my suggestion below the code), change your submit button type to "button" and give it the even onclick="submitForm()". Then define this function in your head. Note that the ????????? needs to be figured out:

In order to decide the value of optionName, I might suggest using class="Photo_Manipulation" (depending on the group it's in, of course) and use optionName=_checkboxes.getAttribute("class"). But don't actually define those classes in the stylesheet. Does that make sense?

jamesbcox1980

Actually, instead of changing the submit button type, it might be better to call this function during validation in the validateForm() function.

BTW, thanks for the offer! I enjoy doing stuff like this, because I love problem solving, so you don't owe me anything I'm actually a graphic designer in addition to being a programmer anyway, so I've got mad photoshop skills haha

rafiakbar

going home now from work. Will sit again after 90 mins. Let you know how it goes

I think I need to understand more in order to apply what you advised me to do so bear with me on this

Rafi

jamesbcox1980

I like Crockford. He's definitely a giant who's shoulders we stand on.

I have gone over it, and I think my last suggestion would be the best way to go. Just use class="xxxx" as a group identifier.

1. Simply find each checkbox related to options, and, in the tag and after the name="......", add class="Photo_Manipulation" or whatever group corresponds to that check box. Make sense?

2. Once you've done that, open the ZIP file I attached below and get "valid.js" from it and upload it to your server to replace the current one. I've also included a backup of the original ("valid.js.bkp"-- just remove the ".bkp" to restore it).

INFO:I added the function above to the valid.js file so that it runs during the other function, "validateForm()". I also changed the name to addFormOptions() and removed the form.submit() line.

Does all that make sense? I hope I have not convoluted the instructions too much!