Populate eform with dynamic data

From MODx Wiki

Jump to: navigation, search

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:

  1. <?php
  2. function populateMailForm(&$fields, &$templates) {
  3. global $modx; // Access to DocumentParser
  4.  
  5. // This tells us what message to load from the db (the 'id' column)
  6. $mail_id = isset($_REQUEST['mail_id']) ? intval($_REQUEST['mail_id']) : 0;
  7.  
  8. $evt =& $modx->event; // The Snippet call event (not eFormOnBeforeFormParse event)
  9.  
  10. // Replicate $isPostBack variable
  11. $validFormId = ($evt->params['formid'] == $_POST['formid']);
  12. $isPostBack = ($validFormId && count($_POST) > 0); // (bool)true if the form is being updated
  13.  
  14. if (!$isPostBack && $mail_id > 0) {
  15. // Check for NOT postback, cuz we want to populate an empty form
  16. // Also, make sure we have an id greater than 0
  17. $rs = $modx->db->select(
  18. '`name`, `email`, `subject`, `message`', // fields to get
  19. 'modx_mymail_messages', // custom table
  20. 'id='.$mail_id // Select by id
  21. );
  22. $row = $modx->db->getRow($rs); // Get the single row
  23.  
  24. if (!empty($row)) // Does the row have data?
  25. $fields = $row; // Copy the data over to the fields variable
  26. } else {
  27. // The form has beed posted, let's not disturb the data.
  28. }
  29. return true; // A value of false will stop the eForm parser
  30. }
  31. ?>

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.

Personal tools