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

@rafiakbarNov 10.2009

The link below is my form

~~[URL=”http://retouchingphotos.co.uk/send-us-your-photos.html”]~~http://retouchingphotos.co.uk/send-us-your-photos.html[/URL]

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

~~[LIST]~~

~~[*]~~

Photo makeover

~~[*]~~

Add object or person

~~[*]~~

Crop image

[/LIST]

Once a customer does the following:

~~[LIST=1]~~

~~[*]~~

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

[/LIST]

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

~~[B]~~Problem:[/B]

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.

~~[B]~~Specifics[/B]

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

to post a comment

JavaScript

67 Comments(s) _↴

@jamesbcox1980Nov 11.2009 — #Let us create a function to solve this problem:

[CODE]
 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=/^ond+$/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);
 }
 [/CODE]

Call it with

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

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.

@rafiakbarauthorNov 11.2009 — #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.[/QUOTE]

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

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

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

Where:

Photo manipulation is [I]new option name[/I] & Add object or person is [I]new option choice[/I].

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

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

[CODE]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=/^ond+$/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);
 
 }[/CODE]

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

Am I close?

Kind Regards

Rafi

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

[CODE]
 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...
 [/CODE]

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

@jamesbcox1980Nov 11.2009 — #The functions I gave you go into your header, and the calls I listed above go somewhere in the html document [B]after[/B] 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):

[CODE]
 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=/^ond+$/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);
 }
 [/CODE]

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.

@rafiakbarauthorNov 11.2009 — #Thanks James!

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

[CODE]PPopSort=[];
 [/CODE]

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

@rafiakbarauthorNov 11.2009 — #Guess what James, I think I have not done it right.

When I submit the form, it returns the following:

[CODE]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[/CODE]

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

[CODE] <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=/^ond+$/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>[/CODE]

and right after the form I have placed the following:

[CODE]<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>[/CODE]

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

Kind Regards,

Rafi

@jamesbcox1980Nov 11.2009 — #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".

@rafiakbarauthorNov 11.2009 — #Hi James,

[CODE]
 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".[/CODE]

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

@jamesbcox1980Nov 11.2009 — #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?

@jamesbcox1980Nov 11.2009 — #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.

@rafiakbarauthorNov 11.2009 — #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

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

[COLOR="DimGray"]"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."

[/COLOR]

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

@jamesbcox1980Nov 11.2009 — #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. ?

@rafiakbarauthorNov 11.2009 — #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

@jamesbcox1980Nov 11.2009 — #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:

[CODE]
 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();
 }[/CODE]

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[i].getAttribute("class"). But don't actually define those classes in the stylesheet. Does that make sense?

@jamesbcox1980Nov 11.2009 — #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

@rafiakbarauthorNov 11.2009 — #going home now from work. Will sit again after 90 mins. Let you know how it goes ?

@rafiakbarauthorNov 11.2009 — #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

@jamesbcox1980Nov 11.2009 — #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.

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

[B]2.[/B] 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).

[B]INFO:[/B]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!

[upl-file uuid=3067a4b4-a75c-42df-9ea4-27f8921cdb35 size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #Hi James

I'm glad you like Crockford. I just finished watching the first of his 4 videos.

Ok this is what I did so far:

[LIST=1]

[*]I unzipped and uploaded your valid.js (cheers for that buddy)

[*]I found each checkbox related to the first package (options), and, in the tag and after the name="......", added class="Photo_Manipulation" - then uploaded the html file

[/LIST]

When I hit submit, it only shows:

[B]Add object or person[/B] followed by the total amount.

James, notice the last two lines on my html file at the beginning of the form:

[CODE] <INPUT type="hidden" name="cmd" value="_cart">
 <INPUT type="hidden" name="add" value="1">
 <INPUT type="hidden" name="business" value="my paypal email address">
 <input type="hidden" name="currency_code" value="GBP"> 
 <INPUT type="hidden" name="receiver_email" value="my paypal email address">
 
 
 <INPUT type="hidden" name="item_name" value="Add object or person">
 <INPUT type="hidden" name="amount" id="amount" value="9.99">
 [/CODE]

When I tried removing these two lines:

[CODE]  <INPUT type="hidden" name="item_name" value="Add object or person">
 <INPUT type="hidden" name="amount" id="amount" value="9.99">[/CODE]

PayPal returned an error message:

[COLOR="Blue"]

PayPal cannot process this transaction because of a problem with the seller's website. Please contact the seller directly to resolve this problem. [/COLOR]

By the way I removed the JavaScript code from the head and the one after the form which you suggested earlier.

Are you able to check the html page and see where I'm going wrong in the form? Could be that I'm using cart instead of button? Beats me.

[COLOR="Blue"][B]To those who are reading besides James[/B][/COLOR]:

If you know where I need to correct the lines (either in the html form or JavaScript) kindly let me know your thoughts too.

Many Thanks.

Rafi

@jamesbcox1980Nov 12.2009 — #Ok, I'm looking into it now. Let me make sure everything is in there correctly

@rafiakbarauthorNov 12.2009 — #Thanks James I appreciate it.

@jamesbcox1980Nov 12.2009 — #Haha I think I found the problem.... brain-fart on my part ? Let me give you the new version. Sorry about that, I should have been more careful. I also noticed that not ALL of the checkboxes had a class with their corresponding group name, so you'll need to look at those too.

It was just I did something to try to get the "value" of the input's label. I'm not sure why I did that... I guess because I had been looking at so many inputs. Anyway, there is no "value" for a label, so I had to change it to get the text on the inside of the label using innerText and textContent.

[upl-file uuid=e6aa3742-597b-402b-8eb0-60a7533a905b size=7kB]valid.js.zip[/upl-file]

@jamesbcox1980Nov 12.2009 — #Still not working, huh? I'm getting an error that says "fileUploadEl is null". This is something that occurs before my script is being called. It's looking for an element with the ID "ctl00_ctl00_cphMain_cphInsideMain_fileUploadN" + x, but I can't find one in the HTML anywhere. Are you sure you have not removed a file upload form?

@rafiakbarauthorNov 12.2009 — #Hi James

Yes I did remove the upload part but now I put it back in the HTML form so you won't get the error. Reason why I removed the image upload section is because the form details are supposed to go to PayPal for customer to pay, but if the customer do upload their images before paying, it won't come to me via PayPal as they wouldn't receive images then pass it to me. That is why I was thinking of removing the upload section from the HTML and JavaScript, let the customer make a payment, and when payment is successful, will get them to a "payment success" page where they can upload images.

But there's a bigger problem than that. If you fill out the form and hit submit, you will see the same one line that keeps coming up on PayPal:

[B]Add object or person quantity amount[/B]

No matter what I select, this keeps showing.

On the html form you will find this section:

[CODE] <INPUT type="hidden" name="cmd" value="_cart">
 <INPUT type="hidden" name="add" value="1">
 <INPUT type="hidden" name="business" value="[email protected]">
 <input type="hidden" name="currency_code" value="GBP"> <!-- currency -->
 <INPUT type="hidden" name="return" value="http://www.url.com/contact-us.html">
 <INPUT type="hidden" name="cancel_return" value="http://www.url.com/send-us-your-photos.html">
 <INPUT type="hidden" name="receiver_email" value="[email protected]">
 
 
 
 
 <INPUT type="hidden" name="item_name" value="Add object or person">
 <INPUT type="hidden" name="amount" id="amount" value="9.99">
 
 [/CODE]

Notice the last two lines. If I remove them, then paypal shows error. If I keep them, then "Add object or person" is the only option that is shown. What to do ?

Rafi

@jamesbcox1980Nov 12.2009 — #It looks like the for() loop in my new script says for(i=[COLOR="Red"]o[/COLOR];i<_checkboxes.length;i++). It needs to say for(i=[COLOR="Red"]0[/COLOR];i<_checkboxes.length;i++)

Wow, I really screwed the pooch on this last one, didn't I?

[upl-file uuid=8021f582-dd6e-404c-a6dd-78d43e588ca5 size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #look at the html page and the new uploaded javascript file. Is it ok now?

@rafiakbarauthorNov 12.2009 — #What about these two lines in the html page? should they be there?

[CODE]
  <INPUT type="hidden" name="item_name" value="Add object or person">
 <INPUT type="hidden" name="amount" id="amount" value="9.99">[/CODE]

Because it keeps coming up on the PayPal page.

@rafiakbarauthorNov 12.2009 — #James guess what?

When I selected 6 add-ons from the first package "Photo Manipulation", on Paypal it now shows 2 separate rows of items. Good news is at least it shows 2 whereas before it used to be only 1. Progress!!! I think we're getting close. Almost time to go home and check out the rest of Crockford videos...

@jamesbcox1980Nov 12.2009 — #Hmm, I'm not sure. It seems like everything is working the way it's supposed to now, as far as my script, except that it's not.... I'm still looking. We'll figure it out, this is all part of testing.

@jamesbcox1980Nov 12.2009 — #Change your form to method="POST" instead of method="post" and add enctype="multipart/form-data"

@jamesbcox1980Nov 12.2009 — #still nothing, but at least I'm not getting the file upload error anymore.

@rafiakbarauthorNov 12.2009 — #[CODE]Change your form to method="POST" instead of method="post" and add enctype="multipart/form-data" [/CODE]

Done that and Tested it. No joy so far but I like your enthusiasm ?

@jamesbcox1980Nov 12.2009 — #[COLOR="Gray"]Just until we figure out what's causing the problem, let's change the ValidateForm() to stop form submission so we can see all the HTML changes that occur.

At the very bottom of ValidateForm(), you'll see a line that says "return true;". Let's change that to "return false;" temporarily. I'm talking about in the valid.js file.

Use this file:[/COLOR] [B][COLOR="Red"]DISREGARD, SEE BELOW[/COLOR][/B]

[upl-file uuid=7d106f8c-d303-471b-9509-11f7a46e9b84 size=7kB]valid.js.zip[/upl-file]

@jamesbcox1980Nov 12.2009 — #oooohhhhh....:eek:

I was wondering what you mean earlier when you said By the way I removed the JavaScript code from the head and the one after the form which you suggested earlier. [/QUOTE]
!!!!

The new function is calling those functions, but I guess you thought we were replacing them. That's not the case. We need to add them back in! :p

I stepped through the JS using Firebug, cause I guess you're headed home, and I discovered that it was calling a function that wasn't there.

So, disregard our last version, and use this one. (I just went ahead and added them to the valid.js)

[upl-file uuid=47ed16a4-5dd2-4668-ad85-33105fdc3afb size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #I'm home now and transferred over the new js file you sent over. I noticed on that file the "return is true" on the last line. Do you want me to change it to "return false"?

@jamesbcox1980Nov 12.2009 — #No, that fixed the problem, but fixing that shows there's one last (hopefully) problem to deal with. Since we're not adding them manually, there are no pre-existing inputs to look at, so we need to adjust the PPopSort array to handle that.

Hopefully, one last upload:

[upl-file uuid=6f0fa03a-8220-4c75-b317-4dc07723a29f size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #Just Googled PPopSort array and guess what came up? Our thread in webdeveloper.com came up lol.

Ok I'm watching part 2 of 4 of the videos...difficult when you have kids running around.

Well keep trying my friend, I'm sure we'll get there. I just added firebug and will play with it and learn a bit more. Again thanks to you.

@jamesbcox1980Nov 12.2009 — #check my post again, I just edited and add the new file (where I said "Hopefully, one last upload"). It was actually the same problem we had the first time around, and I added the ternary operator... I used the original script ?

@rafiakbarauthorNov 12.2009 — #I uploaded the valid.js script from the (hopefully) post. I checked it and now that "Add object or person" keeps showing up. What can I do to get rid of this?

@rafiakbarauthorNov 12.2009 — #Hi James

I emailed a few other developers and one of them got back to me and suggested the following:

[CODE]
 You might try something like this in HTML:
 
 <input id=&#8221;on0&#8221; type="hidden" name="on0" value="Photo manipulation">
 <input id=&#8221;os0&#8221; type="hidden" name="os0" value="Whatever addons the customer selects">
 
 
 
 With this corresponding javascript:
 
 var on0 = document.getElementById('on0');
 
 on0.setAttribute("on0", "My Desired value&#8221;);[/CODE]

Can this help?

Rafi

@jamesbcox1980Nov 12.2009 — #No, that's essentially what I was doing with the script. The script is fine now and is working. The problem is it's not getting run because of some other error on the page.

When I finish filling out the form, and I run ValidateForm() using the FireBug watch script, it adds the options perfectly.

@rafiakbarauthorNov 12.2009 — #I actually found out something interesting by looking at it. Remember I kept asking you about the HTML page? Look at the code below:

Before the HTML page had these lines:

[CODE]  <INPUT type="hidden" name="item_name" value="Add object or person">
 <INPUT type="hidden" name="amount" id="amount" value="9.99">[/CODE]

I changed the name from the first line & got rid of the value of the 2nd line:

[CODE]
 
 <INPUT type="hidden" name="item_name" value="Retouching Photos">
 <INPUT type="hidden" name="amount" id="amount" value="">
 
 [/CODE]

Now when I run the form and go to the PayPal page, the good news is: It shows:

[B]

Retouching Photos[/B] then it shows the first Add-on I select.

So you (the man!) have solved the original problem (where nothing used to show up in the PayPal page) but now faced with a new problem which is:

No matter how many Add-ons I select, the JavaScript only shows the first Add-on on the PayPal page.

If firebug is showing that the script runs perfectly, then what is causing it not to run on the form page and then the PayPal page?

I guess you knew all this before and I just figured it out. I'm slow... like a tortoise heh heh.

[B][COLOR="Red"][SIZE="5"]Over 400 smart people read this thread![/SIZE] [/COLOR]

[COLOR="Silver"]James we should open a *witter account for this problem. Atleast we'd have a large number of followers lol.[/COLOR]

[COLOR="DarkOrange"][SIZE="3"]Anyone out there know what the problem is on this Form or the JavaScript?[/SIZE][/COLOR][/B]

I am offering to retouch your photo for free.

@jamesbcox1980Nov 12.2009 — #Yeah, it's only adding one add-on. I just realized that the checkboxes at the bottom may be causing the problem. When writing this, I wasn't even thinking of them. I'm working on it. I should be able to get this working fully using firebug before I get back to you

@jamesbcox1980Nov 12.2009 — #Ok. Classic rookie mistakes

#1: Using the same variable name more than once in a function to create new elements

#2: Not seeing the whole document and missing the bottom check boxes...

Creating a new version to fix these mistakes.... whew it took some real critical thinking to figure that first one out.

@jamesbcox1980Nov 12.2009 — #Alright, let's try this one. I added a random number generator to create random array indices so that I'm not using ambiguous variable names. I didn't think about this from the beginning because we originally weren't using a loop.

Also, I put in a condition to make sure we're only looking at add-on checkboxes.

....crossing fingers....

[upl-file uuid=1e29c610-5d38-4597-9c98-941f35777200 size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #Its taking a long time for the form to submit. Can you see it from your end James?

@jamesbcox1980Nov 12.2009 — #It's not taking for a long time to submit for me... but, frustratingly, I made another crucial mistake. It's difficult not to be able to test it all before I get it to you, so I apologize if you're having to keep uploading it. If I had done all this with access to the site, I would have had it done in just an hour, tested, working and complete.

This time it's a simple fix, so I'll just tell you what to do:

Online 362 in valid.js, you will see this line:

[CODE]
 if($cbregexp.test(_checkboxes.getAttribute("id")) && _checkboxes[i].checked) { 
 [/CODE]

I didn't add the [i] index reference to _checboxes, so we need to change that line to this:

[CODE]
 if($cbregexp.test(_checkboxes[COLOR="Red"][B][i][/B][/COLOR].getAttribute("id")) && _checkboxes[i].checked) {
 [/CODE]

Again, I apologize for making you upload it over and over till we root out all the mistakes.

@rafiakbarauthorNov 12.2009 — #Now its not showing the first add-on and at times taking ages to load. Is it because of a loop? Do you want me to revert back to the previous version buddy?

@rafiakbarauthorNov 12.2009 — #Are you kidding me? Please don't apologise James, you're taking out the time to help me out and this is the least I can do. Don't be surprised but my patience level isn't bad ?

Ok I've made the change to the .js and it still not showing anything at all apart from calculating the total amount of the add-ons I've selected.

Rafi

@jamesbcox1980Nov 12.2009 — #Ok, I've got it!

change line 360 in valid.js from

[CODE]
 $cbregexp=/cbAddOns/;
 [/CODE]

[CODE]
 $cbregexp=/cb[COLOR="Red"][B]l[/B][/COLOR]AddOns/;
 [/CODE]

That did it for me!!!! I'm seeing all the options now, when I change that from firebug.

@jamesbcox1980Nov 12.2009 — #Well, with real implementation, it's still only showing one option....

@rafiakbarauthorNov 12.2009 — #I've updated the .js file. Ok now its showing only the first add-on of whatever package I choose.

I wonder... could it be that the JavaScript file is now correct but there is something wrong with the form I have on the form page?

@rafiakbarauthorNov 12.2009 — #Ah now you're uploading it on your side. Good. Now I'm confident it wasn't just me. Well what do you think James? Is it the form or still the JavaScript file? Or worse, both?

@jamesbcox1980Nov 12.2009 — #No, it's still the script, because when I run a plain loop on newPPoption() by itself, it still only allows 1 set to be entered, while the addInput() works fine by itself. There's something up with the loop. I wonder why it worked before and not now.

@jamesbcox1980Nov 12.2009 — #I'm going to take a look at it in a few when I get home from work, and I'll see what I can figure out. For some reason it's exiting the loop, but I don't know why. It'll hit me after I step away for a minute and come back to it.

@jamesbcox1980Nov 12.2009 — #Hahahahahahahaha :p

Actually it just hit me... I'm running loops inside of loops inside of loops. We've got to change the variable names ("i") inside the loop initiatives... I can't believe it took me that long to realize it. That's why it worked on the firebug and not in reality... I was using another variable name.... wow...

Try this:

[upl-file uuid=9f5fb09e-e0bb-4f76-82c0-d74432831786 size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 12.2009 — #then I'll take the opportunity to take time out from my laptop as my eyes are hurting.

Thanks for your help James and I'm sure you are pretty close to solving it. Keep it up buddy.

Rafi

@jamesbcox1980Nov 12.2009 — #I think we cross posted again. check my last one

@rafiakbarauthorNov 13.2009 — #Uploaded the .js file. Now its totally blank.?

hmm... maybe add another loop? (trying to talk like a pro lol)

@jamesbcox1980Nov 13.2009 — #Lol that figures I'll take a look

@jamesbcox1980Nov 13.2009 — #grrr... another misplaced character....

Ok, got the horseshoes, 4 leaf clovers and leprechauns out and crossing fingers again....

If this doesn't work, perhaps you can create for me access via FTP to just the scripts folder which the valid.js file is in and msg it to me... That way I can run and edit it directly from Dreamweaver and get it running perfectly in like 5-10 minutes with some debugging scripts.

[upl-file uuid=c801c7f3-08a8-4283-8845-2ed6ede056d2 size=7kB]valid.js.zip[/upl-file]

@rafiakbarauthorNov 13.2009 — #James I agree...I can set one up for you... but hang on... I think this one is working... I'm doing it again to double check.

Can you check from your side as well? (awwww man now I'm getting excited)

@jamesbcox1980Nov 13.2009 — #Yeah it looks like it's working like a champ! And it doesn't add the inputs till after the form validates, so it won't double it up if they fail validation

@rafiakbarauthorNov 13.2009 — #James,

It's working because you worked at it like a champion.

There are 2 little things that I was wondering if its happening because of the JavaScript:

Did you notice that sometimes it takes more than a minute to load the PayPal page after hitting the submit button. Is this happening on your side?

On the PayPal page all the add-ons that you select are displayed including their price but now beside each £ sign there is a weird character Â such as below:

[CODE]Special: Insert background (Â£3.99)
 Special: Cartoonise your photo (Â£4.99)
 Special: Robotize your photo (Â£5.99)
 Special: Panorama photo effects (Â£6.99)
 Special: Spot light (Â£7.99)[/CODE]

Any idea? Let me know.

Anyway despite the above too points I can still set this thread as resolved and I owe it all to you. I opened this thread just for the issue of not able to display add-ons chosen by customers. That issue is resolved and you have done it my friend.

And in case you change your mind, you are always welcome to send us your photo for retouching ?

Kind Regards

Rafi?

@jamesbcox1980Nov 13.2009 — #I haven't seen it take a while to load yet. It could be DNS routing traffic congestion just for you, or something like that. But it should be fine tomorrow. If not, let me know, and we'll check on the script. But the script should take no more than about a quarter second to run, in addition to your previous script. Anyway, the page doesn't send off and start saying "Waiting for paypal.com...." until after the script is finished, so it's probably not related to the script.

It's most likely network related.

As for the £ problem, that's related to your page is set to UTF-8 charset, and it's misreading the ansii code. In place of all the £ signs in the checkbox labels, use

[code=html]
 &pound;
 [/CODE]

That [I]should[/I] fix the problem. For reference, read this: http://www.ascii.cl/htmlcodes.htm

@jamesbcox1980Nov 13.2009 — #And I'm glad to see it working! It makes me happy to finally have solved the problem. It's much easier if I can work directly with the server on projects like that, because I can do debugging and stuff so I have to fix it fewer times.

I'll be sure to send you a project if I've got one beyond my expertise! I'm actually working as a graphic designer and learning programming. My best subject was photoshop.

Anyway, thanks for the fun! let me know if you need anything else (especially projects that pay...hehe :p)

Also in #JavaScript _↴

Firefox problem Image upload disable 'Edit with.....' option in IE

Success!

Help @rafiakbar spread the word by sharing this article on Twitter...

Tweet This

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

67 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

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

67 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

67 Comments(s) _↴

Also in #JavaScript _↴