Form API and Javascript stuck
Hi Everyone, I hope you are enjoying your weekend and not working too hard. I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating. I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit-price-1, etc. Each line item's subtotal should update before going onto the next line item. Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated. One suggestion was to "have form api write those hidden fields after each element is created" Not sure how to accomplish that. function calcPrice() { // Get the Quantity From Form Field // unitCost = document.getElementById ('edit-price-0').value; theQty = document.getElementById ('edit-quantity').value; subOrderCost = theQty * unitCost; //Line Item Cost // subtotalCost = subOrderCost; // subtotalCostDisplay = addCommas(subtotalCost.toFixed(2)); // subtotalCostValue = subtotalCost.toFixed(2); // //// Display Cost To User // document.getElementById('edit-subtotal').value = "$" + subtotalCostDisplay; } -- Karyn
Hi, What drupal version are you using? You mmaight want to look at AHAH which is made to work with dynamic forms. It is built-in in Drupal 6. Additionaly there is an excellent AHAH Helper module, which extends functionality of built-in AHA. You dont really need to write any js if the operations are simple, like in your situation. Some usefull links: http://drupal.org/node/348475 Kindest regards, Adam Ludwinski mobile: +48 606 107 297 adam.ludwinski@meant4.com http://www.meant4.com On 21 February 2010 20:51, Karyn Cassio <karyn@karyncassio.com> wrote:
Hi Everyone,
I hope you are enjoying your weekend and not working too hard.
I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating.
I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit-price-1, etc. Each line item's subtotal should update before going onto the next line item.
Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
One suggestion was to "have form api write those hidden fields after each element is created" Not sure how to accomplish that.
function calcPrice() {
// Get the Quantity From Form Field // unitCost = document.getElementById ('edit-price-0').value; theQty = document.getElementById ('edit-quantity').value;
subOrderCost = theQty * unitCost;
//Line Item Cost // subtotalCost = subOrderCost; // subtotalCostDisplay = addCommas(subtotalCost.toFixed(2)); // subtotalCostValue = subtotalCost.toFixed(2); // //// Display Cost To User // document.getElementById('edit-subtotal').value = "$" + subtotalCostDisplay; }
-- Karyn
Using D6.x Actually, don't think AHAH will work in this case. The issue isn't just adding fields, which is my understanding what AHAH does best. Each line item has computations on them. For instance, form supplies (per line item) item name and a price. Then there is a field for the person to enter the quantity they desire (think order form). As soon as they enter the quantity, line item subtotal fills. That's where js comes in, to do the computation of the line item. Anyway, the same js will be used for all line items and the line items will be different for each field, so hard coding the field id's won't work. I think what I need to do is get the name of the id as well as the value so I can split out the name and then perform the function on each line item. Karyn 303.981.4161 Sent from my Phone On Feb 21, 2010, at 1:53 PM, ad4m <adam@ludwinski.net> wrote:
Hi,
What drupal version are you using? You mmaight want to look at AHAH which is made to work with dynamic forms. It is built-in in Drupal 6. Additionaly there is an excellent AHAH Helper module, which extends functionality of built-in AHA. You dont really need to write any js if the operations are simple, like in your situation. Some usefull links: http://drupal.org/node/348475
Kindest regards, Adam Ludwinski mobile: +48 606 107 297 adam.ludwinski@meant4.com http://www.meant4.com
On 21 February 2010 20:51, Karyn Cassio <karyn@karyncassio.com> wrote: Hi Everyone,
I hope you are enjoying your weekend and not working too hard.
I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating.
I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit- price-1, etc. Each line item's subtotal should update before going onto the next line item.
Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
One suggestion was to "have form api write those hidden fields after each element is created" Not sure how to accomplish that. function calcPrice() {
// Get the Quantity From Form Field // unitCost = document.getElementById ('edit-price-0').value; theQty = document.getElementById ('edit-quantity').value;
subOrderCost = theQty * unitCost;
//Line Item Cost // subtotalCost = subOrderCost; // subtotalCostDisplay = addCommas(subtotalCost.toFixed(2)); // subtotalCostValue = subtotalCost.toFixed(2); // //// Display Cost To User // document.getElementById('edit-subtotal').value = "$" + subtotalCostDisplay; } -- Karyn
Karyn Cassio wrote:
Hi Everyone,
I hope you are enjoying your weekend and not working too hard.
I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating.
I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit-price-1, etc. Each line item's subtotal should update before going onto the next line item.
Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
Let's assume that you've set up the ids so that they all match: 1) Each line item has a unique, probably numeric id. 2) The id of all the form fields for each line item is carefully crafted such that the quantity will be "edit-quantity-ID", the price will be "edit-price-ID" and the subtotal will be "edit-subtotal-ID" 3) The quantity is a textfield. The price is either a disabled textfield so that the user cannot change it, or a hidden field. The subtotal is similar. 4) Each line item quantity has this class: 'line-item-quantity'. You would then create a .js file using this code. Note that I am using jQuery to create simpler code, so if you're not familiar with jQuery it may not be immediately understandable, but it would be very valuable to learn some as use of jQuery significantly increases javascript productivity. For example's sake I am butchering the calculation to be as simple as possible. Judging from your code it needs to be a touch more complex than this, but you can handle that I am sure. ---- // You would put this inside a Drupal behavior: Drupal.behaviors.myBehaviorFunction = function() { $('.line-item-quantity:not(.line-item-processed)') .addClass('line-item-processed') // Ensures we do only process once .change(function() { // The id of this should be edit-quantity-ID so we use replace // to get the base id: var id = $(this).attr('id').replace('edit-quantity-', ''); var price = $('edit-price-' + id).val(); var subTotal = id * price; // Do your actual calculation here. $('edit-subtotal-' + id).val(subTotal); }); };
Earl, Excellent!! That totally makes sense, thanks. Okay so this begs the question that plagues me constantly, why jquery vs JavaScript? And where should I concentrate my learning in this area? FYI, at the bookstore now. Thanks, Karyn Sent from my Phone On Feb 21, 2010, at 2:22 PM, Earl Miles <merlin@logrus.com> wrote:
Karyn Cassio wrote:
Hi Everyone, I hope you are enjoying your weekend and not working too hard. I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating. I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit- price-1, etc. Each line item's subtotal should update before going onto the next line item. Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
Let's assume that you've set up the ids so that they all match:
1) Each line item has a unique, probably numeric id. 2) The id of all the form fields for each line item is carefully crafted such that the quantity will be "edit-quantity-ID", the price will be "edit-price-ID" and the subtotal will be "edit-subtotal-ID" 3) The quantity is a textfield. The price is either a disabled textfield so that the user cannot change it, or a hidden field. The subtotal is similar. 4) Each line item quantity has this class: 'line-item-quantity'.
You would then create a .js file using this code. Note that I am using jQuery to create simpler code, so if you're not familiar with jQuery it may not be immediately understandable, but it would be very valuable to learn some as use of jQuery significantly increases javascript productivity.
For example's sake I am butchering the calculation to be as simple as possible. Judging from your code it needs to be a touch more complex than this, but you can handle that I am sure. ----
// You would put this inside a Drupal behavior: Drupal.behaviors.myBehaviorFunction = function() { $('.line-item-quantity:not(.line-item-processed)') .addClass('line-item-processed') // Ensures we do only process once .change(function() { // The id of this should be edit-quantity-ID so we use replace // to get the base id: var id = $(this).attr('id').replace('edit-quantity-', ''); var price = $('edit-price-' + id).val();
var subTotal = id * price; // Do your actual calculation here.
$('edit-subtotal-' + id).val(subTotal); }); };
It isn't jquery vs. JavaScript. Jquery can be thought of as JavaScript 2.0. It's a cleaned-up standardized library for performing common js tasks on the web. Kyle Mathews On Feb 21, 2010 4:41 PM, "Karyn Cassio" <karyn@karyncassio.com> wrote: Earl, Excellent!! That totally makes sense, thanks. Okay so this begs the question that plagues me constantly, why jquery vs JavaScript? And where should I concentrate my learning in this area? FYI, at the bookstore now. Thanks, Karyn Sent from my Phone On Feb 21, 2010, at 2:22 PM, Earl Miles <merlin@logrus.com> wrote:
Karyn Cassio wrote:
Hi...
Kyle, Thank you. That was a great explanation. Karyn 303.981.4161 Sent from my Phone On Feb 21, 2010, at 2:56 PM, Kyle Mathews <mathews.kyle@gmail.com> wrote:
It isn't jquery vs. JavaScript. Jquery can be thought of as JavaScript 2.0. It's a cleaned-up standardized library for performing common js tasks on the web.
Kyle Mathews
On Feb 21, 2010 4:41 PM, "Karyn Cassio" <karyn@karyncassio.com> wrote:
Earl,
Excellent!! That totally makes sense, thanks.
Okay so this begs the question that plagues me constantly, why jquery vs JavaScript? And where should I concentrate my learning in this area?
FYI, at the bookstore now.
Thanks,
Karyn Sent from my Phone
On Feb 21, 2010, at 2:22 PM, Earl Miles <merlin@logrus.com> wrote:
Karyn Cassio wrote:
Hi...
On Sunday 21 February 2010, Karyn Cassio wrote: jQuery Reference Guide from Packt publishing is a very worthwhile buy
Kyle,
Thank you. That was a great explanation.
Karyn 303.981.4161 Sent from my Phone
On Feb 21, 2010, at 2:56 PM, Kyle Mathews <mathews.kyle@gmail.com>
wrote:
It isn't jquery vs. JavaScript. Jquery can be thought of as JavaScript 2.0. It's a cleaned-up standardized library for performing common js tasks on the web.
Kyle Mathews
On Feb 21, 2010 4:41 PM, "Karyn Cassio" <karyn@karyncassio.com> wrote:
Earl,
Excellent!! That totally makes sense, thanks.
Okay so this begs the question that plagues me constantly, why jquery vs JavaScript? And where should I concentrate my learning in this area?
FYI, at the bookstore now.
Thanks,
Karyn Sent from my Phone
On Feb 21, 2010, at 2:22 PM, Earl Miles <merlin@logrus.com> wrote:
Karyn Cassio wrote:
Hi...
-- ----------------- Bob Hutchinson Midwales dot com -----------------
Alrighty, now I'm home and actually looking at the code surrounded by books. I assume the code below (with modifications of course) should be replacing my javaScript code. However, I'm not sure how I call this from my form. I was calling the javascript with an onchange attribute of a textfield. (BTW, all Earl's assumptions below were exactly correct.) The name of my module is compute_items. This is how I stated the jquery function. Drupal.behaviors.compute_items = function() { //code stuff } Is that the right direction? Karyn On 2/21/10 2:22 PM, Earl Miles wrote:
Karyn Cassio wrote:
Hi Everyone,
I hope you are enjoying your weekend and not working too hard.
I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating.
I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit-price-1, etc. Each line item's subtotal should update before going onto the next line item.
Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
Let's assume that you've set up the ids so that they all match:
1) Each line item has a unique, probably numeric id. 2) The id of all the form fields for each line item is carefully crafted such that the quantity will be "edit-quantity-ID", the price will be "edit-price-ID" and the subtotal will be "edit-subtotal-ID" 3) The quantity is a textfield. The price is either a disabled textfield so that the user cannot change it, or a hidden field. The subtotal is similar. 4) Each line item quantity has this class: 'line-item-quantity'.
You would then create a .js file using this code. Note that I am using jQuery to create simpler code, so if you're not familiar with jQuery it may not be immediately understandable, but it would be very valuable to learn some as use of jQuery significantly increases javascript productivity.
For example's sake I am butchering the calculation to be as simple as possible. Judging from your code it needs to be a touch more complex than this, but you can handle that I am sure. ----
// You would put this inside a Drupal behavior: Drupal.behaviors.myBehaviorFunction = function() { $('.line-item-quantity:not(.line-item-processed)') .addClass('line-item-processed') // Ensures we do only process once .change(function() { // The id of this should be edit-quantity-ID so we use replace // to get the base id: var id = $(this).attr('id').replace('edit-quantity-', ''); var price = $('edit-price-' + id).val();
var subTotal = id * price; // Do your actual calculation here.
$('edit-subtotal-' + id).val(subTotal); }); };
-- Karyn Cassio Drupal Developer 303-981-4161
The Drupal.beahviors.my_module = function() { //Code }; is really just a replacement of the $(document).ready(function(){ }); jquery wrapper that executes your jquery code when the document is ready. To bind an action to an elements change event use something like this within your function. $("#my-element-selector").bind("change", function(){ //do you actions here }); As a note the change event is really on valid on things like select elements and I think radios/chackboxes, but doesn't work on textfields/areas. ----- Adam A. Gregory Drupal Developer & Consultant Web: AdamAGregory.com Twitter: twitter.com/adamgregory Phone: 910.808.1717 Cell: 706.761.7375 On Sun, Feb 21, 2010 at 7:43 PM, Karyn Cassio <karyn@karyncassio.com> wrote:
Alrighty, now I'm home and actually looking at the code surrounded by books. I assume the code below (with modifications of course) should be replacing my javaScript code. However, I'm not sure how I call this from my form. I was calling the javascript with an onchange attribute of a textfield. (BTW, all Earl's assumptions below were exactly correct.)
The name of my module is compute_items. This is how I stated the jquery function. Drupal.behaviors.compute_items = function() { //code stuff }
Is that the right direction?
Karyn
On 2/21/10 2:22 PM, Earl Miles wrote:
Karyn Cassio wrote:
Hi Everyone,
I hope you are enjoying your weekend and not working too hard.
I'm still trying to get my head around js, and was hoping someone may have some insights to help me with the next steps on a form I am creating.
I have an order form that is going to be dynamically created. I am able to successfully pass the quantity value upon user input for field 1. Basically I'm using onchange() to pass the quantity value to the script. The id of the price field is of the format unit-price-0, unit-price-1, etc. Each line item's subtotal should update before going onto the next line item.
Here's the js function. Each line item has its own unit-cost, quantity, and subtotal. Any help would be so appreciated.
Let's assume that you've set up the ids so that they all match:
1) Each line item has a unique, probably numeric id. 2) The id of all the form fields for each line item is carefully crafted such that the quantity will be "edit-quantity-ID", the price will be "edit-price-ID" and the subtotal will be "edit-subtotal-ID" 3) The quantity is a textfield. The price is either a disabled textfield so that the user cannot change it, or a hidden field. The subtotal is similar. 4) Each line item quantity has this class: 'line-item-quantity'.
You would then create a .js file using this code. Note that I am using jQuery to create simpler code, so if you're not familiar with jQuery it may not be immediately understandable, but it would be very valuable to learn some as use of jQuery significantly increases javascript productivity.
For example's sake I am butchering the calculation to be as simple as possible. Judging from your code it needs to be a touch more complex than this, but you can handle that I am sure. ----
// You would put this inside a Drupal behavior: Drupal.behaviors.myBehaviorFunction = function() { $('.line-item-quantity:not(.line-item-processed)') .addClass('line-item-processed') // Ensures we do only process once .change(function() { // The id of this should be edit-quantity-ID so we use replace // to get the base id: var id = $(this).attr('id').replace('edit-quantity-', ''); var price = $('edit-price-' + id).val();
var subTotal = id * price; // Do your actual calculation here.
$('edit-subtotal-' + id).val(subTotal); }); };
-- Karyn Cassio Drupal Developer 303-981-4161
Adam Gregory wrote:
As a note the change event is really on valid on things like select elements and I think radios/chackboxes, but doesn't work on textfields/areas.
It actually does work on textfields, but only when your focus leaves the textfield. (not sure about textareas). To get instant updates there's always keydown which will make the function fire whenever a key is pressed within the textfield.
In case anyone is still awake: Drupal.behaviors.compute_items = function() { $(".line-item-quantity").bind("change",function() { // The id of this should be edit-quantity-ID so we use replace var id = $(this).attr('id').replace('edit-quantity-', ''); // alert('edit-quantity-' + id); var quantity = $('edit-quantity-' + id, this).val(); alert(quantity); var price = $('edit-price-' + id).val(); alert(price); var subTotal = quantity * price; // Do your actual calculation here. alert(subTotal); subTotal = isNaN(subTotal) ? 0 : subTotal; alert(subTotal); $('edit-subtotal-' + id).val(subTotal); alert('edit-subtotal-' + id); }); }; quantity and price are returning *undefined*. Thoughts? -- Karyn Cassio Drupal Developer 303-981-4161 On 2/21/10 8:55 PM, Earl Miles wrote:
Adam Gregory wrote:
As a note the change event is really on valid on things like select elements and I think radios/chackboxes, but doesn't work on textfields/areas.
It actually does work on textfields, but only when your focus leaves the textfield. (not sure about textareas). To get instant updates there's always keydown which will make the function fire whenever a key is pressed within the textfield.
Wahoo, just answered my own question Instead of: $('edit-quantity-' +id).val(); Should be: $('#edit-quantity-'+id).val(); Yeah for progress! On 2/21/10 10:12 PM, Karyn Cassio wrote:
In case anyone is still awake:
Drupal.behaviors.compute_items = function() { $(".line-item-quantity").bind("change",function() { // The id of this should be edit-quantity-ID so we use replace var id = $(this).attr('id').replace('edit-quantity-', ''); // alert('edit-quantity-' + id); var quantity = $('edit-quantity-' + id, this).val(); alert(quantity); var price = $('edit-price-' + id).val(); alert(price); var subTotal = quantity * price; // Do your actual calculation here. alert(subTotal); subTotal = isNaN(subTotal) ? 0 : subTotal; alert(subTotal); $('edit-subtotal-' + id).val(subTotal); alert('edit-subtotal-' + id); }); };
quantity and price are returning *undefined*.
Thoughts? -- Karyn Cassio Drupal Developer 303-981-4161
On 2/21/10 8:55 PM, Earl Miles wrote:
Adam Gregory wrote:
As a note the change event is really on valid on things like select elements and I think radios/chackboxes, but doesn't work on textfields/areas.
It actually does work on textfields, but only when your focus leaves the textfield. (not sure about textareas). To get instant updates there's always keydown which will make the function fire whenever a key is pressed within the textfield.
-- Karyn Cassio Drupal Developer 303-981-4161
On 2/22/10 7:48 AM, Earl Miles wrote:
Karyn Cassio wrote:
Wahoo, just answered my own question Instead of: $('edit-quantity-' +id).val(); Should be: $('#edit-quantity-'+id).val();
Yup! Sorry about that! No worries, just helped me understand what I was looking at. Thanks for all your help.
-- Karyn Cassio Drupal Developer 303-981-4161
Karyn Cassio wrote:
Alrighty, now I'm home and actually looking at the code surrounded by books. I assume the code below (with modifications of course) should be replacing my javaScript code. However, I'm not sure how I call this from my form. I was calling the javascript with an onchange attribute of a textfield. (BTW, all Earl's assumptions below were exactly correct.)
The name of my module is compute_items. This is how I stated the jquery function. Drupal.behaviors.compute_items = function() { //code stuff }
I should have explained the code better, because one thing jQuery does is not obvious, but incredibly freaking awesome. This piece of code right here is one of the amazing things jQuery can do for you: $('css identifier').change(function() { /* code */ }); That actually is the same as calling onchange from within your HTML, except you do not have to pollute your HTML with javascript at all. What that does is bind a 'change' event to everything with that identifier. That's why we put a single class="line-item-quantity" on every quantity, so they have a unique ID and a non-unique class. That class binds the javascript. HTML and javascript become separated, resulting in vastly easier maintenance and understandability. Plus, you are safe from future use with AJAX, since by embedding this in a behavior, your change binds will be called properly even if the HTML is added via an AJAX (or AHAH) call.
Drupal.behaviors.myBehaviorFunction = function() { $('.line-item-quantity:not(.line-item-processed)') .addClass('line-item-processed') // Ensures we do only process once .change(function() { // The id of this should be edit-quantity-ID so we use replace // to get the base id: var id = $(this).attr('id').replace('edit-quantity-', ''); var price = $('edit-price-' + id).val();
var subTotal = id * price; // Do your actual calculation here.
$('edit-subtotal-' + id).val(subTotal); }); };
participants (6)
-
ad4m -
Adam Gregory -
Bob Hutchinson -
Earl Miles -
Karyn Cassio -
Kyle Mathews