[development] Form API and Javascript stuck

[Adam Gregory]

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 at 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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.drupal.org/pipermail/development/attachments/20100221/0190ccc8/attachment-0001.html