Working with Forms

This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

WebLoginPE makes customizing your web user management easy. Many placeholders are set so that your form inputs can be automatically set with useful, pertinent user information.

The power of WebLoginPE's functionality comes from the concept of "services". A WebLoginPE service is a block of code that is executed on command from a user. It is passed to WebLoginPE through $_REQUEST (either POST or GET).

WebLoginPE has made extensive use of the <button> element* as it's value can differ from the text on the button where as with <input type="submit">, the value dictates not only the $_REQUEST value of the button, but the text written on it.

Example:
<button type="submit" name="service" value="login">Click Here To Login</button>

Will display

<input type="submit" name="service" value="Click Here To Login" />

Will display

but there is no WebLoginPE service called "Click Here To Login", so nothing will happen.

We could use

<input type="submit" name="service" value="login" />

which will work, but

is ugly and does not lead to user friendliness.

* Internet Explorer has a bug where the value of a submit <button> is read as the innerText of the button. WebLoginPE uses JavaScript to correct this malfunction in Internet Explorer.

Inevitably, you are going to want to use &customFields to add user attributes to your registration and profile forms, but this information also pertains to the stander web_user_attributes table columns as well.

In your forms, any data that you wish to collect for registration or saving in the user's profile should be done with standard HTML <input /> tags. The key here is the <input /> tag's name attribute. When a form is submitted, it is collected by PHP and put in an associative array ($_POST / $_REQUEST) and each form input gives a key (it's name attribute) and a value (it's content), so any value that you wish to save to the database MUST have a form input with a name attribute that matches that database table column's name.

Example:

In the default web_user_attributes table there is a column named email. If you wish to collect this information from a user to be stored in the database, you need to have an input like this in your form:

<input type="text" id="myRegistrationFormEmail" name="email" value="[+post.email+]" />

It is also handy with registration forms to make use of the [+post.inputname+] placeholders so the user does not have to re-enter information if WebLoginPE rejects their registration for some reason.

So what happens if you want to collect information in a <select>, <select multiple>, <input type="checkbox" />, or <input type="radio" /> form element and have the users selection "remembered" (checked for checkboxes and radios and selected for <select>'s)?

This is where the &inputHandler parameter becomes very useful. The &inputHandler lets you specify one of the form elements above and when the form is presented to the user, for example while editing their profile, their selections and checks are "rememberd".

The basic syntax is:

&inputHandler
&inputHandler=`LABEL:DOM_ID:FIELDNAME:FIELD_TYPE:Option(value),Option2(value2)`

Multiple form elements should be separated by double pipes (||). For inputs that are not in the standard web_user_attributes table, remember to specify them in &customFields.

&inputHandler [<select>]

A <select> input for type of vehicle:

&customFields=`vehicletype`
&inputHandler=`Your Vehicle Type:userVehicle:vehicletype:select:Compact(compact),Van(van),Light Truck(light_truck),SUV(suv)`

This would output:

<label for="userVehicle" id="userVehicleLabel">Your Vehicle Type
<select id="userVehicle" name="vehicletype">
<option value="compact">Compact</option>
<option value="van">Van</option>
<option value="light_truck">Light Truck</option>
<option value="suv">SUV</option>
</select>
</label>

The code above would be stored in the placeholder [+form.vehicletype+]. You should put this placeholder in your form where you want the select element to appear. In order for WebLoginPE to "remember" the user's saved value, you must use this placeholder.

&inputHandler [<select multible>]

A <select multiple> input for favorite colors:

&customFields=`favorite_colors`
&inputHandler=`Favorite Colors:userFavoriteColors:favorite_colors:select multiple:Red(ff0000),Orange(ff9900),Green(66ff00),Black(000000)`

This would output:

<label for="userFavoriteColors" id="userFavoriteColorsLabel">Favorite Colors
<select multiple id="userFavoriteColors" name="favorite_colors">
<option value="ff0000">Red</option>
<option value="ff9900">Orange</option>
<option value="66ff00">Green</option>
<option value="000000">Black</option>
</select>
</label>

The code above would be stored in the placeholder [+form.favorite_colors+]. You should put this placeholder in your form where you want the multiple select to appear. In order for WebLoginPE to "remember" the user's saved value, you must use this placeholder.

&inputHandler [<input type="radio" />]

An <input type="radio" /> for best time to contact:

&customFields=`contact_time`
&inputHandler=`Best time to contact you:userContactRadios:contact_time:radio:Morning(morning),Afternoon(afternoon),Evening(Evening)`

This would output:

Morning Afternoon Evening
<label for="userContactRadios" id="userContactRadiosLabel">Best time to contact you
<div id="userContactRadiosDiv">
<input type="radio" name="contact_time" id="userContactRadiosMorning" value="morning" />
<span class="userContactRadiosSpan">Morning</span>
<input type="radio" name="contact_time" id="userContactRadiosAfternoon" value="afternoon" />
<span class="userContactRadiosSpan">Afternoon</span>
<input type="radio" name="contact_time" id="userContactRadiosEvening" value="evening" />
<span class="userContactRadiosSpan">Evening</span>
</div>
</label>

The code above would be stored in the placeholder [+form.contact_time+]. You should put this placeholder in your form where you want the radio buttons to appear. In order for WebLoginPE to "remember" the user's saved value, you must use this placeholder.

&inputHandler [<input type="checkbox" />]

For any database field that you have displayed in your &usersTpl or &viewUsersTpl templates you may give the user the option on their profile editing page to keep an attribute private. As an example, we will use the email table column.

For every column that you wish to make optionally private you need to specify its name followed by private in &customFields. To keep the email private you would need a custom field called emailprivate

An <input type="checkbox" /> email privacy:

&customFields=`emailprivate`
&inputHandler=`Keep my email private:userPrivateEmail:emailprivate:checkbox:()`

This would output:

<label for="userPrivateEmail" id="userPrivateEmailLabel">Keep my email private
<input type="checkbox" name="emailprivate" id="userPrivateEmail" />
</label>

The code above would be stored in the placeholder [+form.emailprivate+]. You should put this placeholder in your form where you want the checkbox to appear. In order for WebLoginPE to "remember" the user's saved value, you must use this placeholder.

&inputHandler [Putting it all together]

It is easy to get all these input handlers together in one WebLoginPE call.

[!WebLoginPE?
&type=`profile`
&customFields=`vehicletype,favorite_colors,contact_time,emailprivate`
&inputHandler=`Your Vehicle Type:userVehicle:vehicletype:select:Compact(compact),Van(van),Light Truck(light_truck),SUV(suv) ||Favorite Colors:userFavoriteColors:favorite_colors:select multiple:Red(ff0000),Orange(ff9900),Green(66ff00),Black(000000) ||Best time to contact you:userContactRadios:contact_time:radio:Morning(morning),Afternoon(afternoon),Evening(Evening) ||Keep my email private:userPrivateEmail:emailprivate:checkbox:()`
!]

The WebLoginPE call above would be generate the placeholders [+form.vehicletype+], [+form.favorite_colors+], [+form.contact_time+], and [+form.emailprivate+]. You should put these placeholders in your form where you want the respective form inputs to appear. In order for WebLoginPE to "remember" the user's saved values, you must use these placeholder.

Suggest an edit to this page.