jQuery example/tutorial - dynamic form
I'm not sure how soon jQuery documentation will become a part of this site, but I'm happy to contribute what I can. At http://www.ubercart.org/node/18 I have posted an interactive example that uses jQuery to dynamically add elements to a form based on a select box within the form. This requires no form submission to change the data collected. The example I created is for a product entry form of different product types- specific information is collected for the different product types within the same form. Perhaps you can have a dynamic form collect different information for a contact form on your website... whatever you want I suppose.
This tutorial also covers some basics of jQuery, and I'm happy to write more about using jQuery to enhance your pages. Feedback/suggestions welcome!
Visual jQuery
Also, interested users really should check out http://www.visualjquery.com for an extremely handy visual representation of the jQuery documentation. I'd like to see Drupal get some exposure in the magazine being produced there, as well, and hope to submit info/articles related to integrating Drupal/jQuery to the editor... We'll see what happens.
The magazine has a pretty good introduction to jQuery concept as well... a recommended read.
here you go
http://drupal.org/node/84893
As more content is added, it will probably get it's own top level section.
-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain
Thanks for the link.. I'll
Thanks for the link.. I'll see what I can do. ^_^
I started a section in
I started a section in Developing for Drupal about Javascript and AJAX in Drupal with emphasis (obviously) on jQuery, it's history, and examples (well one so far) to help people learn how Drupal and jQuery work together.
The snippet section that sepeck posted is undeniably here to stay, whether the developer information I've written warrants it's own section where I've put it ... I'm interested in feedback about that.
Just a quick note that
Just a quick note that another snippet showing an animated block was added to the site. This one is for a shopping cart and can easily be used in any site block:
http://www.ubercart.org/node/28
I'll try to write handbook pages over the weekend that use Drupal's API instead of my hardcoded concept-design HTML. :)
It was very helpful, thanks!
It was very helpful, thanks!
how hard
How hard do you think it would be to use this dynamic form tool example to hook jnto taxonomy as needed in http://drupal.org/node/89242
Thanks.
RK
Doesn't seem like it would
Doesn't seem like it would be that difficult... thing is the example I posted won't include the data in $form_values. The values submitted would be in $_POST. If you're doing custom code, that's no problem. You could always use a multi-step form, too.
(I'm just having a hard time picturing what your form looks like... jQuery can certainly drop extra form elements into a div, though, and it's very simple to use AJAX to load a "page" in your Drupal site that only spits out the form elements. We're using that for product creation at Ubercart.)
----------------------
Current Drupal project: http://www.ubercart.org
Works like a charm
Hi I am building Dynamic taxonomy Form from Ryan`s code
http://www.ubercart.org/jquery_dynamic_form/18
So
My first step is done:
$vid=2;$formname="taxonomy";$vocabulary = db_query("SELECT term_data.name, term_data.tid, term_data.language FROM term_data WHERE term_data.vid=$vid AND
term_data.language = '" . i18n_get_lang() . "' ORDER BY name");
$options[] = t('... '); // Initialise the Taxonomy array
//Populate array with taxonomy ID / name
while ($term = db_fetch_object($vocabulary)) {
$options[$term->tid] = $term->name;
}
//Build dropdown select
$form['taxonomy']['2'] = array(
'#type' => 'select',
'#name' => $formname,
'#id' => 'class-box',
'#title' => 'Jump Taxonomy',
'#default_value' => '',
'#options' => $options,
'#description' => '',
'#multiple' => $multiple = FALSE,
'#required' => $required = FALSE,
'#attributes' => array('onchange' => 'mod_class_fields(this.value);')
);
You can see two important things .
First is compatible with i18n and second after choice will open a new box. Very Good!!
Thanks Ryan. Your code is fantastic.
The link to jQuery dynamic form tutorial
The tutorial referred at http://www.ubercart.org/node/18 about jQuery dynamic form does not exist. I remember seeing that tutorial a while back. But it is not in its place anymore. There is a note in the site also that says there was some server failure where data was lost.
Is there any other way to access that tutorial? Pointer to equivalent tutorial is also welcome.
Online Business
The link to jQuery dynamic form tutorial found
It is on webarchive.org at http://web.archive.org/web/20070123140946/www.ubercart.org/jquery_dynami...