First, I want to apologize for this ultra long problem description, but I figure it's better to be thorough than give only part of the story ... and who knows, with luck, this long post might help someone else duplicate a working version of this form without all the same hassles I've experienced😀
Chronoforms version:
3.1 RC5.5
Problem Description:
Can't get Javascript function to replace checkbox field name or value
Form Setup Description:
My form allows people to buy up to two items with one form submission.
The two items are in a checkbox array, like so:
Note, the two checkboxes above share name="check0[]" This is because Chronoforms uses an array for checkboxes. This is problematic for my Javascript below, but I'll explain that in a moment. For now, let's assume it's no biggie...although it may be.
Now, as I have come to understand it, when you use a Paypal cart that can hold multiple items, you have to send both the item's name and the item's amount (or price) as separate fields (e.g., item_name_1, amount_1; item_name_2, amount_2, etc.). A checkbox, unfortunately, doesn't allow me to do that. A checkbox has a name="" and a value="" but I can only use that to send the name or the price, but not both.
To further muddy the waters, however, it also turns out that when you use checkboxes to send items to a Paypal cart, you cannot skip an item in the checkbox list because Paypal's code will not allow it to go from say "item_name_1" to "item_name_3". Perhaps it's an anti-tamper thing, but it's a reality.
Luckily, someone on the Paypal Developer forum wrote some Javascript that not only allows us to send both the item_name AND the item amount using one checkbox, but also skirts the skipped item problem by checking for empty checkboxes and moving whatever is below the skipped item up to fill the hole. Here's that code which I adapted to my form's design and put into my Chronoforms form's On Submit code - before field:
Remember my note above about name="check0[]" being a problem? In the code above, the Javascript refers to the two checkboxes as "item1" and "item2" respectively. I did change my checkbox names to these names but it didn't help. I tried it with the name="check0[]" as well, and that didn't help either ... but I'm not so sure it's the problem. Let's move on with that in mind.
To clarify, because this can get bewildering, my actual form's checkboxes are named "item1" and "item2"; the code above has the lines ...
if(document.formname.item1.checked), and
if(document.formname.item2.checked).
Those lines determine if either of the checkboxes are checked (ticked). If item1 checkbox is checked, it will set the field named "item_name_1" to Apples AND it will set the field named "amount_1" to 100 (yeah, expensive fruit).
If item2 checkbox is checked, then it will set the field named "item_name_2" to Oranges AND it will set the field named "amount_1" to 150.
The additional if(count==x) statements in the Javascript above are what will fill any empty holes should you skip an item (for example, if you tick only the second checkbox and not the first).
So, where are these fields item_name_1, item_name_2, amount_1 and amount_2? They are added to the form's HTML code as hidden fields:
All we have to do now is call the Javascript when someone presses the submit button. To that end, I added the following to the Form Tag Attachment field under the General tab in my Chronoform:
Problem Description:
When I submit the form, it seems that the Javascript function isn't working.
With DEBUG = ON ...
1. I get a debug page that first echos the Javascript function at the top of the page.
2. I then get the form email output
3. I then get the following output:
Attempts to Solve:
[list=1]
DID NOT WORK: Tried putting the square brackets at the end of the checkbox names and reflecting that change in the Javascript code too.
DID NOT WORK: tried changing onsubmit="codename()" to onsubmit="return codename()"
DID NOT WORK: Changed Renew Form Instance On Submit setting from "New Instance" to "Same Instance".
DID NOT WORK: Changed ChronoForms handle my posted arrays from "YES" to "NO" and back again.
DID WORK: Hard-coded the item_name_1, item_name_2, amount_1, and amount_2 values just to see if everything else was working, which it was. [/list:o]
Any ideas what I'm doing wrong?
Please don't let it be a comma out of place!😀
Chronoforms version:
3.1 RC5.5
Problem Description:
Can't get Javascript function to replace checkbox field name or value
Form Setup Description:
My form allows people to buy up to two items with one form submission.
The two items are in a checkbox array, like so:
<input value="apples" title="" class="radio validate-one-required" id="check00" name="check0[]" type="checkbox" />
<label for="check00" class="check_label">Apples</label>
<br />
<input value="oranges" title="" class="radio validate-one-required" id="check01" name="check0[]" type="checkbox" />
<label for="check01" class="check_label">Oranges</label>
Note, the two checkboxes above share name="check0[]" This is because Chronoforms uses an array for checkboxes. This is problematic for my Javascript below, but I'll explain that in a moment. For now, let's assume it's no biggie...although it may be.
Now, as I have come to understand it, when you use a Paypal cart that can hold multiple items, you have to send both the item's name and the item's amount (or price) as separate fields (e.g., item_name_1, amount_1; item_name_2, amount_2, etc.). A checkbox, unfortunately, doesn't allow me to do that. A checkbox has a name="" and a value="" but I can only use that to send the name or the price, but not both.
To further muddy the waters, however, it also turns out that when you use checkboxes to send items to a Paypal cart, you cannot skip an item in the checkbox list because Paypal's code will not allow it to go from say "item_name_1" to "item_name_3". Perhaps it's an anti-tamper thing, but it's a reality.
Luckily, someone on the Paypal Developer forum wrote some Javascript that not only allows us to send both the item_name AND the item amount using one checkbox, but also skirts the skipped item problem by checking for empty checkboxes and moving whatever is below the skipped item up to fill the hole. Here's that code which I adapted to my form's design and put into my Chronoforms form's On Submit code - before field:
var count=1;
function codename() {
count=1;
document.formname.item_name_1.value='';
document.formname.item_name_2.value='';
document.formname.amount_1.value='';
document.formname.amount_2.value='';
if(document.formname.item1.checked)
{
document.formname.item_name_1.value = "Apples";
document.formname.amount_1.value = "100";
count=count+1;
}
if(document.formname.item2.checked)
{
if(count==2){
document.formname.item_name_2.value = "Oranges";
document.formname.amount_2.value = "150";
count=count+1;
}
if(count==1){
document.formname.item_name_1.value = "Oranges";
document.formname.amount_1.value = "150";
count=count+1;
}
}
}
Remember my note above about name="check0[]" being a problem? In the code above, the Javascript refers to the two checkboxes as "item1" and "item2" respectively. I did change my checkbox names to these names but it didn't help. I tried it with the name="check0[]" as well, and that didn't help either ... but I'm not so sure it's the problem. Let's move on with that in mind.
To clarify, because this can get bewildering, my actual form's checkboxes are named "item1" and "item2"; the code above has the lines ...
if(document.formname.item1.checked), and
if(document.formname.item2.checked).
Those lines determine if either of the checkboxes are checked (ticked). If item1 checkbox is checked, it will set the field named "item_name_1" to Apples AND it will set the field named "amount_1" to 100 (yeah, expensive fruit).
If item2 checkbox is checked, then it will set the field named "item_name_2" to Oranges AND it will set the field named "amount_1" to 150.
The additional if(count==x) statements in the Javascript above are what will fill any empty holes should you skip an item (for example, if you tick only the second checkbox and not the first).
So, where are these fields item_name_1, item_name_2, amount_1 and amount_2? They are added to the form's HTML code as hidden fields:
<input type="hidden" name="amount_1">
<input type="hidden" name="amount_2">
<input type="hidden" name="item_name_1">
<input type="hidden" name="item_name_2">
All we have to do now is call the Javascript when someone presses the submit button. To that end, I added the following to the Form Tag Attachment field under the General tab in my Chronoform:
onsubmit="codename()"
Problem Description:
When I submit the form, it seems that the Javascript function isn't working.
With DEBUG = ON ...
1. I get a debug page that first echos the Javascript function at the top of the page.
2. I then get the form email output
3. I then get the following output:
Form passed first SPAM check OK
Form passed the submissions limit (if enabled) OK
Form passed the Image verification (if enabled) OK
Form passed the server side validation (if enabled) OK
$_POST Array: Array
(
[amount_1] =>
[amount_2] =>
[item_name_1] =>
[item_name_2] =>
[item1] =>apples
[item2] =>oranges
[button_x] => Submit
)
$_FILES Array: Array
(
)
Redirect URL set
Form passed the plugins step (if enabled) OK
An email has been SENT successfully from to
Debug End
Redirect link set, click to test: [removed]
Attempts to Solve:
[list=1]
Any ideas what I'm doing wrong?
Please don't let it be a comma out of place!😀
Hi Grumpster,
You should not use the value of the name property, but the id property.
If you've got MooTools loaded, then you could also use the $() operator (fetches elements by their ID), which means you don't even have to know the full DOM-path to the element:
Without MooTools, simply use document.ChronoContact_yourform.check00 for the first checkbox and .check01 for the second one.
/Fredrik
You should not use the value of the name property, but the id property.
If you've got MooTools loaded, then you could also use the $() operator (fetches elements by their ID), which means you don't even have to know the full DOM-path to the element:
var count=1;
function codename() {
count=1;
$('item_name_1').value='';
$('item_name_2').value='';
$('amount_1').value='';
$('amount_2').value='';
if ($('check00').checked)
{
$('item_name_1').value = "Apples";
$('amount_1').value = "100";
count=count+1;
}
if ($('check01').checked)
{
if (count==2)
{
$('item_name_2').value = "Oranges";
$('amount_2').value = "150";
count=count+1;
}
if (count==1){
$('item_name_1').value = "Oranges";
$('amount_1').value = "150";
count=count+1;
}
}
}
Without MooTools, simply use document.ChronoContact_yourform.check00 for the first checkbox and .check01 for the second one.
/Fredrik
Fredrik,
Thank you very much for your help with this!
I tried both your Mootools-enabled code (with mootools.js called in the head tags) and the non-Mootools approach, and I'm still not getting that Javascript to work --- DEBUG is still showing no values for item_name_1, item_name_2, amount_1, and amount_2. I must be missing something really, really simple because it makes no sense at all. Like I said above, I'm currently inserting onsubmit="codename()" into the Form tag attachment field, but I'm not absolutely sure that is correct.
Perhaps I should establish that I'm using the Form Tag Attachment field properly? There's got to be a simple alert box script I can run, yes?
I think if I can just establish that I'm using that Form Tag Attachment field properly, it would go a long way toward solving this problem.
Any suggestions?
Thank you very much for your help with this!
I tried both your Mootools-enabled code (with mootools.js called in the head tags) and the non-Mootools approach, and I'm still not getting that Javascript to work --- DEBUG is still showing no values for item_name_1, item_name_2, amount_1, and amount_2. I must be missing something really, really simple because it makes no sense at all. Like I said above, I'm currently inserting onsubmit="codename()" into the Form tag attachment field, but I'm not absolutely sure that is correct.
Perhaps I should establish that I'm using the Form Tag Attachment field properly? There's got to be a simple alert box script I can run, yes?
I think if I can just establish that I'm using that Form Tag Attachment field properly, it would go a long way toward solving this problem.
Any suggestions?
Hi Grumpster,
Are you submitting this form directly to PayPal using the OnSubmit URL?
If not, and you are using the ReDirect Plugin, then I'd suggest that you do this processing after submission using PHP. I find it much easier to work there than in the form using JavaScript.
That said, you may be better using the onClick event with the submit button. If you are using LiveValidation then the onSubmit event can be blocked by the validation process. (I had this happen with a form recently and onClick got round it and executed before the validation.)
I also prefer to use the MooTools addEvent function to add events to fields. Give the submit input an id='submit' then use
Bob
Are you submitting this form directly to PayPal using the OnSubmit URL?
If not, and you are using the ReDirect Plugin, then I'd suggest that you do this processing after submission using PHP. I find it much easier to work there than in the form using JavaScript.
That said, you may be better using the onClick event with the submit button. If you are using LiveValidation then the onSubmit event can be blocked by the validation process. (I had this happen with a form recently and onClick got round it and executed before the validation.)
I also prefer to use the MooTools addEvent function to add events to fields. Give the submit input an id='submit' then use
$('submit').addEvent('click', function() {
. . .
});
Bob
That said, you may be better using the onClick event with the submit button ...
That worked!
I really can't thank you enough for that one. I was going cuckoo.
Even though it's working now and I can move on with my life, I'm going to play around with those Mootools methods and see if I can make them work, as well (it's always nice to have alternative approaches in one's back pocket for future projects).
:)
I am hoping someone can help me out. I have put the chronoform on the website, and am trying to get the paypal option to work. When I submit the form, I get a page can’t be found error. I thought I followed the step by step instructions (here: http://www.chronoengine.com/tutorials/chronoforms-plugins/437-paid-registration-using-paypal-plugin.html) but I’m not sure what I’ve done wrong.
If you can help me out (I need this form up asap) that would be wonderful!!
Please PM me, and I'll send you the username/password so you can help, please?!?
If you can help me out (I need this form up asap) that would be wonderful!!
Please PM me, and I'll send you the username/password so you can help, please?!?
This topic is locked and no more replies can be posted.