www.webdeveloper.com
Page 1 of 5 123 ... LastLast
Results 1 to 15 of 68

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

  1. #1
    Join Date
    Nov 2009
    Posts
    47

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

    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:
    1. select a Package (e.g. Photo Manipulation)
    2. select one or more Add-ons (e.g. Add object or person, Cropping etc )
    3. enter their details
    4. 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="on0" value="Photo manipulation">
    <input type="hidden" name="os0" value="Whatever addons the customer selects">

    <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

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    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=/^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
    Code:
    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.

  3. #3
    Join Date
    Nov 2009
    Posts
    47

    Question jamesbcox1980 - plug form name in the call?

    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.
    Code:
    <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:

    Code:
    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?


    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=/^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

  4. #4
    Join Date
    Dec 2008
    Posts
    488
    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...
    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

  5. #5
    Join Date
    Dec 2008
    Posts
    488
    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):
    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=/^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.

  6. #6
    Join Date
    Nov 2009
    Posts
    47
    Thanks James!

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

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

  7. #7
    Join Date
    Nov 2009
    Posts
    47

    Question *Update

    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

    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=/^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:


    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>
    Why is it showing everything? Atleast its better than showing nothing heh heh.

    Kind Regards,

    Rafi

  8. #8
    Join Date
    Dec 2008
    Posts
    488
    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".
    Last edited by jamesbcox1980; 11-11-2009 at 10:22 AM.

  9. #9
    Join Date
    Nov 2009
    Posts
    47
    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".
    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

  10. #10
    Join Date
    Dec 2008
    Posts
    488
    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?
    Last edited by jamesbcox1980; 11-11-2009 at 10:55 AM.

  11. #11
    Join Date
    Dec 2008
    Posts
    488
    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.

  12. #12
    Join Date
    Nov 2009
    Posts
    47
    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

  13. #13
    Join Date
    Nov 2009
    Posts
    47

    Question Please help me write the if statements...

    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

  14. #14
    Join Date
    Dec 2008
    Posts
    488
    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.

  15. #15
    Join Date
    Nov 2009
    Posts
    47
    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
    Last edited by rafiakbar; 11-11-2009 at 11:41 AM. Reason: Grammatical errors

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles