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

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?

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 :cool: haha

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

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

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!

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

Ok, I'm looking into it now. Let me make sure everything is in there correctly

Thanks James I appreciate it.

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.

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?

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

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?

look at the html page and the new uploaded javascript file. Is it ok now?

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.

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