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

This site is best viewed in a modern browser with JavaScript enabled.

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

rafiakbar

The link below is my form

http://retouchingphotos.co.uk/send-us-your-photos.html

*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

<input type="hidden" name="on1" value="Photo restoration">
<input type="hidden" name="os1" value="Whatever addons the customer selects">
.
.
.

I need to populate the value of os0, os1, os2 etc etc using Javascript depending on the Add-ons the customer selects.

Can you help? Thank you for reading and I look forward to your replies.

Kind Regards

Rafi

jamesbcox1980

Let us create a function to solve this problem:

function addInput(obj,_typ,_nam,_val){
    newInput=document.createElement('input');
    newInput.setAttribute("type",_typ);
    newInput.setAttribute("name",_nam);
    newInput.setAttribute("value",_val);

obj.appendChild(newInput);
}

function newPPoption(_form,optname,optvalue){
    _allInputs=document.getElementsByTagName('input');
    PPoptions=[];

PPregex=/^on\d+$/i;
for(i=0;i<_allInputs.length;i++){
    if(_allInputs[i].type=='hidden' && PPregex.test(_allInputs[i].name)) {PPoptions.push(_allInputs[i]);}
}

PPopSort=PPoptions.sort();

_max=parseInt(PPopSort[PPopSort.length-1].name.match(/\d+/),10);

addInput(_form,"hidden","on"+(_max+1),optname);
addInput(_form,"hidden","os"+(_max+1),optvalue);
}

Call it with

newPPoption(document.forms["PP_form_name"],"new option name","new option choice");

Just get the name of the form you want to add the inputs to and plug it in the above call, as well as your option name and option choice.

rafiakbar

Dear James,

Thank you for your reply. I really appreciate you taking the time to work this out.

To be honest James even if I had spent a month I still don't think I'd be able to come up with the code you just showed me so hats off to you buddy!

You said:

Just get the name of the form you want to add the inputs to and plug it in the above call, as well as your option name and option choice.

<FORM action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">

So just to be clear, you want me to plug in the form name (PayPal) to the call like I did below:

newPPoption(document.forms["PP_paypal"],"Photo manipulation","Add object or person");

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?

function addInput(obj,_typ,_nam,_val){
    newInput=document.createElement('input');
    newInput.setAttribute("type",_typ);
    newInput.setAttribute("name",_nam);
    newInput.setAttribute("value",_val);

obj.appendChild(newInput);
}

function newPPoption(_form,optname,optvalue){
    _allInputs=document.getElementsByTagName('input');
    PPoptions=[];

PPregex=/^on\d+$/i;
for(i=0;i<_allInputs.length;i++){
    if(_allInputs[i].type=='hidden' && PPregex.test(_allInputs[i].name)) {PPoptions.push(_allInputs[i]);}
}

PPopSort=PPoptions.sort();

_max=parseInt(PPopSort[PPopSort.length-1].name.match(/\d+/),10);

addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_1"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_2"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_3"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_4"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_5"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_6"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_7"+(_max+1),optvalue);
addInput(_form,"hidden","on0_1"+(_max+1),optname);
addInput(_form,"hidden","os0_8"+(_max+1),optvalue);

}

The above is only for the 8 new option choices of the first option name (Photo manipulation)

Am I close?

Kind Regards

Rafi

jamesbcox1980

No, you did not need to edit the newPPoption() function. Use the original function I gave you and call it like this:

newPPoption(document.forms["paypal"],"Photo manipulation","Add object or person");
newPPoption(document.forms["paypal"],"Photo manipulation","Viginette");
newPPoption(document.forms["paypal"],"Web Page Design","Simple static page");
newPPoption(document.forms["paypal"],"Another Option","Another choice for the option");
etc...

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):

function addInput(obj,_typ,_nam,_val){
    newInput=document.createElement('input');
    newInput.setAttribute("type",_typ);
    newInput.setAttribute("name",_nam);
    newInput.setAttribute("value",_val);

obj.appendChild(newInput);
}

function newPPoption(_form,optname,optvalue){
    _allInputs=document.getElementsByTagName('input');
    PPoptions=[];

PPregex=/^on\d+$/i;
for(i=0;i<_allInputs.length;i++){
    if(_allInputs[i].type=='hidden' && PPregex.test(_allInputs[i].name)) {PPoptions.push(_allInputs[i]);}
}

PPopSort=[];
PPopSort=PPoptions.sort();

_max=PPopSort.length>0?parseInt(PPopSort[PPopSort.length-1].name.match(/\d+/),10):-1;

addInput(_form,"hidden","on"+(_max+1),optname);
addInput(_form,"hidden","os"+(_max+1),optvalue);
}

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.

I'm going to apply these changes. Fingers Crossed dude!

Kind Regards

rafiakbar

Guess what James, I think I have not done it right.

When I submit the form, it returns the following:

Photo manipulation: Add object or person
Photo manipulation: Cropping
Photo manipulation: Photo makeover
Photo manipulation: Replacing background
Photo manipulation: Remove object or person
Photo manipulation: Colour photo to sepia
Photo manipulation: Convert colour photo to black and white
Photo manipulation: Convert black and white to colour
Photo restoration: Add colour to black & white photos
Photo restoration: Minor repair
Photo restoration: Major repair
Photo retouching: Change eye colour
Photo retouching: Change lip colour
Photo retouching: Brighten teeth
Photo retouching: Brighten eyes
Photo retouching: Nose correction
Photo retouching: Add shine
Photo retouching: Remove pores
Photo retouching: Remove scars
Photo retouching: Remove wrinkles
Photo retouching: Remove facial lines
Photo retouching: Improve complexion
Photo retouching: Colour correction
Photo retouching: Face slimming
Photo retouching: Skin lightening
Photo retouching: Colour photo to sepia
Photo retouching: From colour photo to black and white
Photo retouching: From black and white to colour
Special effects: Insert background
Special effects: Cartoonise your photo
Special effects: Robotize your photo
Special effects: Panorama photo effects
Special effects: Spot light
Website package offer: Online portfolio website
Website package offer: Online model website
Website package offer: Online wedding album website
Website package offer: Online children album website
Website package offer: Online family album website

On the header of the html page I have placed the following:

 <SCRIPT language="javascript" type="text/javascript">

		function addInput(obj,_typ,_nam,_val){
newInput=document.createElement('input');
newInput.setAttribute("type",_typ);
newInput.setAttribute("name",_nam);
newInput.setAttribute("value",_val);

obj.appendChild(newInput);
}

function newPPoption(_form,optname,optvalue){
    _allInputs=document.getElementsByTagName('input');
    PPoptions=[];

PPregex=/^on\d+$/i;
for(i=0;i<_allInputs.length;i++){
    if(_allInputs[i].type=='hidden' && PPregex.test(_allInputs[i].name)) {PPoptions.push(_allInputs[i]);}
}

PPopSort=[];
PPopSort=PPoptions.sort();

_max=PPopSort.length>0?parseInt(PPopSort[PPopSort.length-1].name.match(/\d+/),10):-1;

addInput(_form,"hidden","on"+(_max+1),optname);
addInput(_form,"hidden","os"+(_max+1),optvalue);
}



</SCRIPT>

and right after the form I have placed the following:

<SCRIPT language="javascript" type="text/javascript">


newPPoption(document.forms["paypal"],"Photo manipulation","Add object or person");
newPPoption(document.forms["paypal"],"Photo manipulation","Cropping");
newPPoption(document.forms["paypal"],"Photo manipulation","Photo makeover");
newPPoption(document.forms["paypal"],"Photo manipulation","Replacing background");
newPPoption(document.forms["paypal"],"Photo manipulation","Remove object or person");
newPPoption(document.forms["paypal"],"Photo manipulation","Colour photo to sepia");
newPPoption(document.forms["paypal"],"Photo manipulation","Convert colour photo to black and white");
newPPoption(document.forms["paypal"],"Photo manipulation","Convert black and white to colour");


newPPoption(document.forms["paypal"],"Photo restoration","Add colour to black & white photos");
newPPoption(document.forms["paypal"],"Photo restoration","Minor repair");
newPPoption(document.forms["paypal"],"Photo restoration","Major repair");


newPPoption(document.forms["paypal"],"Photo retouching","Change eye colour");
newPPoption(document.forms["paypal"],"Photo retouching","Change lip colour");
newPPoption(document.forms["paypal"],"Photo retouching","Brighten teeth");
newPPoption(document.forms["paypal"],"Photo retouching","Brighten eyes");
newPPoption(document.forms["paypal"],"Photo retouching","Nose correction");
newPPoption(document.forms["paypal"],"Photo retouching","Add shine");
newPPoption(document.forms["paypal"],"Photo retouching","Remove pores");
newPPoption(document.forms["paypal"],"Photo retouching","Remove scars");
newPPoption(document.forms["paypal"],"Photo retouching","Remove wrinkles");
newPPoption(document.forms["paypal"],"Photo retouching","Remove facial lines");
newPPoption(document.forms["paypal"],"Photo retouching","Improve complexion");
newPPoption(document.forms["paypal"],"Photo retouching","Colour correction");
newPPoption(document.forms["paypal"],"Photo retouching","Face slimming");
newPPoption(document.forms["paypal"],"Photo retouching","Skin lightening");
newPPoption(document.forms["paypal"],"Photo retouching","Colour photo to sepia");
newPPoption(document.forms["paypal"],"Photo retouching","From colour photo to black and white");
newPPoption(document.forms["paypal"],"Photo retouching","From black and white to colour");


newPPoption(document.forms["paypal"],"Special effects","Insert background");
newPPoption(document.forms["paypal"],"Special effects","Cartoonise your photo");
newPPoption(document.forms["paypal"],"Special effects","Robotize your photo");
newPPoption(document.forms["paypal"],"Special effects","Panorama photo effects");
newPPoption(document.forms["paypal"],"Special effects","Spot light ");


newPPoption(document.forms["paypal"],"Website package offer","Online portfolio website");
newPPoption(document.forms["paypal"],"Website package offer","Online model website");
newPPoption(document.forms["paypal"],"Website package offer","Online wedding album website");
newPPoption(document.forms["paypal"],"Website package offer","Online children album website");
newPPoption(document.forms["paypal"],"Website package offer","Online family album website");


</SCRIPT>

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:

http://retouchingphotos.co.uk/send-us-your-photos.html

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:

function submitForm(){
    _formInputs=document.getElementsByTagName('inputs');
    _checkboxes=[];
    for(i=0;i<_formInputs.length;i++){
        if(_formInputs[i].type=='checkbox') _checkBoxes.push(_formInputs[i]);
    }
    for(i=o;i<_checkboxes.length;i++){
        if(_checkboxes[i].checked) {
            optionName=????????????????; //I don't know how you'll determine this part.
            optionChoice=_checkboxes[i].parentNode.getElementsByTagName('label')[0].value;
            newPPoption(document.forms["paypal"],optionName,optionChoice);
        }
    }
    document.forms["paypal"].submit();
}

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

rafiakbar

Hi James

I'm glad you're into problem solving. I'm currently watching this interesting video on JavaScript by Yahoo's Douglas Crockford. Link's below:

http://www.learnwebdesignonline.com/videos/programming/javascript/yahoo-douglas-crockford

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!

valid.js.zip

7kB