www.webdeveloper.com
Page 2 of 5 FirstFirst 1234 ... LastLast
Results 16 to 30 of 68

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

  1. #16
    Join Date
    Dec 2008
    Posts
    488
    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();
    }
    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?

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

  3. #18
    Join Date
    Nov 2009
    Posts
    47
    going home now from work. Will sit again after 90 mins. Let you know how it goes

  4. #19
    Join Date
    Nov 2009
    Posts
    47

    update

    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/...glas-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

  5. #20
    Join Date
    Dec 2008
    Posts
    488

    Post solution

    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!
    Attached Files Attached Files

  6. #21
    Join Date
    Nov 2009
    Posts
    47

    Question update - only shows Add object or person and not what I selected

    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:

    1. I unzipped and uploaded your valid.js (cheers for that buddy)
    2. 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


    When I hit submit, it only shows:
    Add object or person 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">

    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">
    PayPal returned an error message:


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


    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.

    To those who are reading besides James:
    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

  7. #22
    Join Date
    Dec 2008
    Posts
    488
    Ok, I'm looking into it now. Let me make sure everything is in there correctly

  8. #23
    Join Date
    Nov 2009
    Posts
    47
    Thanks James I appreciate it.

  9. #24
    Join Date
    Dec 2008
    Posts
    488

    Post

    Haha I think I found the problem.... brain-fart on my part :P 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.
    Attached Files Attached Files
    Last edited by jamesbcox1980; 11-12-2009 at 09:58 AM.

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

  11. #26
    Join Date
    Nov 2009
    Posts
    47

    Question

    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:

    Add object or person quantity amount

    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="order@email.com">
      <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="order@email.com">
    
    
    
    
      <INPUT type="hidden" name="item_name" value="Add object or person">
      <INPUT type="hidden" name="amount" id="amount" value="9.99">

    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
    Last edited by rafiakbar; 11-12-2009 at 10:32 AM. Reason: Grammar mistake

  12. #27
    Join Date
    Dec 2008
    Posts
    488

    Post

    It looks like the for() loop in my new script says for(i=o;i<_checkboxes.length;i++). It needs to say for(i=0;i<_checkboxes.length;i++)

    Wow, I really screwed the pooch on this last one, didn't I?
    Attached Files Attached Files
    Last edited by jamesbcox1980; 11-12-2009 at 10:39 AM.

  13. #28
    Join Date
    Nov 2009
    Posts
    47
    look at the html page and the new uploaded javascript file. Is it ok now?

  14. #29
    Join Date
    Nov 2009
    Posts
    47
    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">
    Because it keeps coming up on the PayPal page.

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

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