Populate eform with dynamic data
From MODx Wiki
Contents |
eForm is a powerful Snippet by itself, here is a way you can extend it to save information entered by a user to a custom database. It only requires a small modification of your form chunk so that placeholders are in each <input value="[+value+]" />.
Getting Started
To get a form that populates with data from database using eForm is a little tricky, there's a couple ways to do it. This tutorial will show you one way. Another way will be described in the conclusion.
In this tutorial you will need the following skills:
- Creating a snippet and knowledge of PHP as well as how to retrieve data from a database
- eForm Validation
- MODx placeholders
Create the Chunk
There's a couple chunks you need to create before you can get started. For this demonstration, we will use A Simple Contactform Chunk provided by ScottyDelicious (small modifications made for readibility). We'll name the chunk 'eFormMailMe' (without quotes).
[+validationmessage+] <form method="post" action="[~[*id*]~]" id="EmailForm"> <fieldset> <h3> Contact Us</h3> <label for="cfName">Your name: <p><input name="name" id="cfName" type="text" value="[+name+]" eform="Your Name::1:"/></p></label> <label for="cfEmail">Your Email Address: <p><input name="email" id="cfEmail" type="text" value="[+email+]" eform="Email Address:email:1" /></p></label> <label for="cfRegarding">Regarding: <p><input name="subject" id="cfRegarding" type="text" value="[+subject+]" eform="Form Subject::1" /></p></label> <label for="cfMessage">Message: <p><textarea name="message" id="cfMessage" eform="Message:textarea:1">[+message+]</textarea></p> </label> <p><input type="submit" class="button" value="Send This Message" /></p> </fieldset> </form>
Note the addition of input value placeholders, these are required for pre-loading the form with data. eForm will normally automatically generate these when the form is posted, however that discussion is outside the scope of this tutorial.
Create the Database Table
Since in our chunk we will be saving 4 fields, our database will need to have 5 columns (one for id). Name your database columns using the same name as in the <input> tag. In this example our database will have the following columns:
| id - unsigned int(5) | name - varchar(100) | email - varchar(100) | subject - varchar(100) | message - text
The id tag is most important if you wish to load data from the db. Call the database 'modx_mymail_messages' (no quotes).
(The instructions they forgot above, especially for those of you who haven't done this before, which includes me.))
To create the database you need to go into phpmyadmin, select the modx database and then select create new database, which will be at the bottom of the page.
Then name the database as instructed in the last line above ie: modx_mymail_messages
Now you can proceed to follow the instructions above.
The initial choice won't be as above,
unsigned and varchar, text etc are under Type, so select as appropriate. The numbers are selected in the Value column, and int in the attributes.
Once you've filled in all the values and saved it, then the final summary will look like the above.
Create the Code
The code to be created will be called using eForm's eFormOnBeforeFormParse event. This function will take two parameters: &$fields, &$templates. There are a couple places to save this code, but for this demonstration, save it as a snippet called 'MyMailParser' (no quotes).
Here is the complete function, with commented source:
<?php function populateMailForm(&$fields, &$templates) { // This tells us what message to load from the db (the 'id' column) $evt =& $modx->event; // The Snippet call event (not eFormOnBeforeFormParse event) // Replicate $isPostBack variable $validFormId = ($evt->params['formid'] == $_POST['formid']); if (!$isPostBack && $mail_id > 0) { // Check for NOT postback, cuz we want to populate an empty form // Also, make sure we have an id greater than 0 $rs = $modx->db->select( '`name`, `email`, `subject`, `message`', // fields to get 'modx_mymail_messages', // custom table 'id='.$mail_id // Select by id ); $row = $modx->db->getRow($rs); // Get the single row $fields = $row; // Copy the data over to the fields variable } else { // The form has beed posted, let's not disturb the data. } return true; // A value of false will stop the eForm parser } ?>
Notes about the code
Line 8 simply declares a reference (the & means reference) to the current MODx event object. For more information, please see the evalSnippet API Function.
API Functions Used
The Snippet Call
This example requires two snippet calls (one to load our function, the other to call eForm). It will look something like this:
[!MyMailParser!] [!eForm? &tpl=`eFormMailMe` &formid=`Emailform` &eFormOnBeforeFormParse=`populateMailForm`!]
Both snippets are called in no-cache mode so that they will be loaded fresh each time.
Conclusion
This is not yet a complete tutorial. For instance, it does not describe how to populate the database with data. Those who wish to expand on this article may find the eForm2db forum thread a good place to start.
Categories: HOWTO | EForm
