| View previous topic :: View next topic |
| Author |
Message |
Legend
Joined: 24 Feb 2008
Posts: 10
|
 Posted: Sun Feb 24, 2008 7:55 pm Post subject: Using HTML Quickform to create a simple AJAX form |
 |
|
I was wondering if someone could help me create a simple AJAX form using HTML_Quickform. I don't really understand how to do this now that the Logic and Design have been separated. Can someone please give me some pointers on how to do this?
If it helps, I'm using prototype and scriptaculous... |
|
| Back to top |
|
 |
mark
Joined: 07 Jan 2007
Posts: 1051
|
| Posted: Sun Feb 24, 2008 8:54 pm Post subject: Re: Using HTML Quickform to create a simple AJAX form |
|
|
| Legend wrote: | I was wondering if someone could help me create a simple AJAX form using HTML_Quickform. I don't really understand how to do this now that the Logic and Design have been separated. Can someone please give me some pointers on how to do this?
If it helps, I'm using prototype and scriptaculous... |
"AJAX" is very unspecific -- there is so much that you can do with this concept regarding forms.
Just an example: You could add an "onkeyup" event to a text field that does something with Prototype's AJAX code, e.g. fill another field or validate the already typed value in the current field.
If you need more details, you should ask more specific ... |
|
| Back to top |
|
|
Legend
Joined: 24 Feb 2008
Posts: 10
|
| Posted: Sun Feb 24, 2008 9:01 pm Post subject: |
|
|
I'm so sorry about it. For example, I want something like a hierarchical select box (I have another thread, but that is not AJAX related). There was this code:
| Code: |
$main[0] = 'Pop';
$main[1] = 'Rock';
$main[2] = 'Classical';
$secondary[0][0] = 'Belle & Sebastian';
$secondary[0][1] = 'Elliot Smith';
$secondary[0][2] = 'Beck';
$secondary[1][3] = 'Noir Desir';
$secondary[1][4] = 'Violent Femmes';
$secondary[2][5] = 'Wagner';
$secondary[2][6] = 'Mozart';
$secondary[2][7] = 'Beethoven';
$select =& $form->addElement('hierselect', 'music', 'Please select:');
$select->setOptions(array($main, $secondary));
|
Now, I do not want both of them to appear at the same time. The main dropdown box should appear and then when the user clicks on an option, it should display the second drop down box after querying my database for the specific options. So for this, I would do something like:
$select->setAttribute('id', "some_id_here');
(Just read your other post  )
And then I know I have to add an onclick event to the main box, but I'm a little confused at the moment. |
|
| Back to top |
|
|
mark
Joined: 07 Jan 2007
Posts: 1051
|
| Posted: Sun Feb 24, 2008 9:10 pm Post subject: |
|
|
I'm not sure whether I got your idea. The initial form should only show the country select box, right? (Let's ignore other fields that your form might have but that are not related to the problem itself.)
Now the user selects e.g. France in this box. What do you expect to happen then? I guess that you're looking for some AJAX magic that adds another select box that is filled with some specific items related to France? |
|
| Back to top |
|
|
Legend
Joined: 24 Feb 2008
Posts: 10
|
| Posted: Sun Feb 24, 2008 9:11 pm Post subject: |
|
|
| Ah... yes exactly... |
|
| Back to top |
|
|
mark
Joined: 07 Jan 2007
Posts: 1051
|
| Posted: Sun Feb 24, 2008 9:22 pm Post subject: |
|
|
Okay. Then I'd suggest the following:
Add two 'select' elements to your form. The first for your country selection, the second for the details.
The second element should be hidden initially, i.e. get the following attribute array: | Code: | | array('style' => 'display: none'); |
The first element needs an 'onchange' event, maybe calling Prototype's AJAX updater class. For this you also need to assign an id to the second element (you can assign this every time, no need to make this depending on anything).
The event would need to replace to replace the HTML code of the second select element (or at least its contents, i.e. the <option> tags). Therefore, you'll need another scripts that receives the select value from the country select box, gets the right items from the database, and echoes the needed option tags. In addition, the event would make the second element visible (JS: $('yourid').show();).
That's basically the idea. You might also want to consider the case that people have turned JavaScript off ... |
|
| Back to top |
|
|
Legend
Joined: 24 Feb 2008
Posts: 10
|
| Posted: Sun Feb 24, 2008 9:30 pm Post subject: |
|
|
Great! I think I understood what you said... Its something like this then:
| Code: | Create a new HTMLQuickform object
Add a select box to it, call it s1
s1->setAttribute('onClick', 'js_function()');
Add a select box to form, call it s2
s2->setAttribute('id','s2');
s2->setAttribute('style','display:none');
if(form->validate())
---Do the form processing stuff
else
---form->display() |
And then there would be a js function like:
| Code: | function js_function() {
--- params = serialize the form
--- new Ajax.Updater('s2', 'process.php',{onComplete:function(){ new Effect.Appear('s2');},asynchronous:true, evalScripts:true, parameters:params})
} |
Am I on the right track? And one silly question would be, how to I add a div tag to the form? I mean if there is a select box that I want to be under specific div tag, how would I do it? |
|
| Back to top |
|
|
mark
Joined: 07 Jan 2007
Posts: 1051
|
| Posted: Sun Feb 24, 2008 9:37 pm Post subject: |
|
|
| Legend wrote: | | Am I on the right track? |
Yes.
| Legend wrote: | | And one silly question would be, how to I add a div tag to the form? I mean if there is a select box that I want to be under specific div tag, how would I do it? |
The easiest (and cleanest) way would be to modify the element template for this element:
| Code: |
$renderer = $form->defaultRenderer();
$renderer->setElementTemplate('...', 's2');
|
Instead of '...' you need to take the default element template string from HTML/QuickForm/Renderer/Default.php, and add a <div> tag to it. (If this <div> tag should get the id attribute, you could simply add it in this string, and remove the setAttribute() call.) |
|
| Back to top |
|
|
Legend
Joined: 24 Feb 2008
Posts: 10
|
| Posted: Sun Feb 24, 2008 9:42 pm Post subject: |
|
|
Oh no... I meant add a div tag to a whole set of elements sorry... For example, following up through your explanation, it makes it easy to put some elements under the same div and then when a selection has been made just change the style of this div tag to visible rather than changing the same for each element. Or am I imagining to much for a simple problem?
If we get back to the requirement, if the country box is selected, your explanation covered on adding an onClick event. Now, if I have to display multiple select boxes, does it make sense to actually put these select boxes under a div tag or just make multiple 'make visible' statements? |
|
| Back to top |
|
|
mark
Joined: 07 Jan 2007
Posts: 1051
|
| Posted: Sun Feb 24, 2008 9:51 pm Post subject: |
|
|
QF's default renderer uses tables, with each element on one table row. This makes it impossible to group multiple elements in one group.
You could use my tableless renderer (which uses <ol> and <li> by default, but you can modify that), but it's still not that easy to group multiple elements if you don't want to have an own fieldset elements for these elements.
What you could easily do is to make a group with the multiple elements, and to modify the template for this group (i.e. add the <div> tag).
The alternative would be to make every element visible with one JS call, as you suggested it. |
|
| Back to top |
|
|
Legend
Joined: 24 Feb 2008
Posts: 10
|
| Posted: Sun Feb 24, 2008 10:05 pm Post subject: |
|
|
| Good to know that... Thanks for all the valuable information you provided and also thanks for you time. I'll try what I've learnt from you and will get back if I face some trouble. |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
