jQuery/javascript - i need help/examples
I have a form in which after two fields (x and y) are entered I need default values for other fields on the form to be set. I have limited experience with javascript and none with jQuery. I have searched for examples but I can't find any for this scenario. Can someone please point me in the right direction? TIA, -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Earnie Boyd wrote:
I have a form in which after two fields (x and y) are entered I need default values for other fields on the form to be set. I have limited experience with javascript and none with jQuery. I have searched for examples but I can't find any for this scenario. Can someone please point me in the right direction?
TIA, -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Not sure whether your issue is the this/then part of it, or the form part. Basically, to change the value of a form in javascript, you would use the form field id and do something like this: var x = getElementById('formfieldid'); - where formfieldid is the id, then x.value = newvalue;
Are the default fields for the other fields going to be the same values that are in x and y? Earnie Boyd wrote:
I have a form in which after two fields (x and y) are entered I need default values for other fields on the form to be set. I have limited experience with javascript and none with jQuery. I have searched for examples but I can't find any for this scenario. Can someone please point me in the right direction?
TIA, -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Quoting Adam Moore <amoore5@ucmerced.edu>:
Are the default fields for the other fields going to be the same values that are in x and y?
No, x and y are fields that will be used to do a db query and data from the db will be used as values in the other fields. -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Earnie, If you have a simple form as follows: <form> <input type="text" id="alpha" class="check-on-change" /> <input type="text" id="beta" class="check-on-change" /> <input type="text" id="gamma" /> </form> to do a simple auto population of the third field based on the sum of the first two with jquery would look like this: <javascript> $(document).ready(function() { $('.check-on-change').change(show_sum); }); function show_sum() { var a = $('#alpha").val(); var b = $('#beta").val(); $('#gamma').val(a + b); } </javascript> In jQuery, you access DOM elements with "selectors", which are strings that follow the exact same syntax as CSS, but wrapped in "$(...)". Once you have accessed them like this, you can perform functions on them such as .val() with no params to /get/ the current form field value, or val(x) with a parameter to /set/ the value. the first bit, "$(document).ready(function(){...});, set's everything up to work after the DOM has been loaded. see http://docs.jquery.com/Core, and in particular the section on the left of that page titled "API Reference" for lots more info. Seth Earnie Boyd wrote:
I have a form in which after two fields (x and y) are entered I need default values for other fields on the form to be set. I have limited experience with javascript and none with jQuery. I have searched for examples but I can't find any for this scenario. Can someone please point me in the right direction?
TIA, -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Quoting Seth Freach <sfreach@gmail.com>:
Earnie,
If you have a simple form as follows: <form> <input type="text" id="alpha" class="check-on-change" /> <input type="text" id="beta" class="check-on-change" /> <input type="text" id="gamma" /> </form>
to do a simple auto population of the third field based on the sum of the first two with jquery would look like this: <javascript> $(document).ready(function() { $('.check-on-change').change(show_sum); });
function show_sum() { var a = $('#alpha").val(); var b = $('#beta").val(); $('#gamma').val(a + b); } </javascript>
In jQuery, you access DOM elements with "selectors", which are strings that follow the exact same syntax as CSS, but wrapped in "$(...)". Once you have accessed them like this, you can perform functions on them such as .val() with no params to /get/ the current form field value, or val(x) with a parameter to /set/ the value.
the first bit, "$(document).ready(function(){...});, set's everything up to work after the DOM has been loaded.
see http://docs.jquery.com/Core, and in particular the section on the left of that page titled "API Reference" for lots more info.
Thanks, Seth. You've got me started and I'm thinking I need to also add ['#ahah'] to my forms. I'm still confused by the various API but I'll muddle through it now. -- Earnie -- http://r-feed.com/ -- http://for-my-kids.com/ -- http://www.4offer.biz/ -- http://give-me-an-offer.com/
Hi! Except to use $(document).ready(function(){...});, Drupal have a wrapp ti help you in this type of use: Drupal.behaviors (http://api.drupal.org/api/drupal/developer--topics--javascript_startup_guide...) You can learn a lot about using JS/Jquery in Drupal at: http://api.drupal.org/api/drupal/developer--topics--javascript_startup_guide... Ramon -- Ramon Vilar Gavaldà - http://ramonvilar.facil.cat - http://blog.facilitant.net Membre de FÀCIL - http://www.facil.cat Membre de l'esplai SESA - http://www.esplaisesa.org
participants (5)
-
Adam Moore -
Earnie Boyd -
Jeff Greenberg -
Ramon Vilar Gavaldà -
Seth Freach