Joomla input form field output
All I want to do is provide joomla input forms with a basic bootstrap style:
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">some text</span>
<input class="form-control" />
I am using mixin with less to apply styles to existing input class
//input form fields
.validate-email{
.form-control;
}
And I am overriding com_users / remind.php for other html changes.
But there is some php code that messed up the output. This is the source code from com_users / remind.php that I am overriding:
<fieldset>
<?php foreach ($this->form->getFieldset($fieldset->name) as $name => $field) : ?>
<div class="control-group">
<div class="control-label">
<?php echo $field->label; ?>
</div>
<div class="controls">
<?php echo $field->input; ?>
</div>
</div>
<?php endforeach; ?>
</fieldset>
I don't need the label (see above), so I removed those lines. I changed all available classes and made a mixin for the input-field class (see above).
It looks like this:
<fieldset>
<?php foreach ($this->form->getFieldset($fieldset->name) as $name => $field) : ?>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
<?php echo $field->input; ?>
</div>
</div>
<?php endforeach; ?>
</fieldset>
BUT the surrounding php lines in this code are doing something weird that I don't understand. The result looks like this:
<fieldset>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
<input type="email" aria-required="true" required="" size="30" value="" id="jform_email" class="validate-email invalid" name="jform[email]" aria-invalid="true"> </div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
</div>
</div>
</fieldset>
So the first form-group is what I want. The second form is a group - the output normally matches the corresponding label of the input field. I need to get rid of this second form output file.
I am not doing basic hacks, I am looking for a way to override the joomla IO output. I don't want to create my own form fields, for example docs: http://docs.joomla.org/Creating_a_custom_form_field_type
I need to either get rid of this "foreach" without generating any php errors, but I have no idea how to change this php code. Or I need to load this input field for E-Mails without unnecessary stuff, but I don't know how.
I tried to create my own field override by adding
JForm::addFieldPath(JPATH_THEMES . '/MyTemplate/html/fields');
and copy the remind.php file to that folder. but it doesn't load my custom.pp. The docs mention overriding getLabel
public function getLabel() {
return '<span style="text-decoration: underline;">' . parent::getLabel() . '</span>';}
But I can't figure out how to use this on getInput
If anyone has correct php lines or some other simpler solution pls will let me know. I've been on trial and error for a while and I'm running out of ideas. Thanks, Lars
source to share
Finally I found a way to add custom fields and render individual input fields (thanks to Brian). This gives me full control over the output fields of the joomla form, this is an update to update and all files are in the MyTemplate folder. This is mainly an override. I am showing the whole process for a .php reminder found in Joomla / components / com_users / remind:
-
I create a com_users override in my template folder, copying all files from joomla / components / com_users / views / remind Joomla / templates / MyTemplate / html / com_users / remind
-
I add these lines to the remind.php file:
$this->form->reset( true );
// to reset the xml form loaded by the view$this->form->loadFile( dirname(__FILE__) . DS . "remind.xml");
// to load my own version of remind.xml using FILE constant
Now I can use my own remind.xml file from the same folder.
- I am copying remind.xml from joomla / components / com_users / models / forms to Joomla / templates / MyTemplate / html / com_users / remind
And I add the following lines to this xml:
hint="This is the placeholder-text"
class="form-control"
The whole file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<form>
<fieldset name="default" label="COM_USERS_REMIND_DEFAULT_LABEL">
<field name="email" type="email"
hint="My Placeholder"
class="form-control"
description="COM_USERS_FIELD_REMIND_EMAIL_DESC"
label="COM_USERS_FIELD_REMIND_EMAIL_LABEL"
required="true"
size="30"
validate="email"
/>
<field
name="captcha"
type="captcha"
label="COM_USERS_CAPTCHA_LABEL"
description="COM_USERS_CAPTCHA_DESC"
validate="captcha"
/>
</fieldset>
</form>
You can of course add any lines you want.
-
Now I am modifying the default.php file in Joomla / templates / MyTemplate / html / com_users / remind folder. These are similar lines suggested by Brian (sorry code-formatting doesn't work here):
Email mail form-> getInput ('email') ;? >
That's all.
html output looks like this:
<fieldset>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
<input type="email" aria-required="true" required="" placeholder="My Placeholder" size="30" value="" id="jform_email" class="validate-email form-control" name="jform[email]"> </div>
</div>
</fieldset>
Ok, I know there is some code in this post that is not displaying correctly, but I cannot figure out how to fix it, and I am not yet allowed to post screenshots. Sorry for this.
source to share
If you want to ditch the foreach loop and manually render individual fields, you can render the fields separately directly from the JForm object.
<fieldset>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">E-Mail</span>
<?php echo $this->form->getInput('email'); ?>
</div>
</div>
<div class="form-group">
<div class="input-group">
<?php echo $this->form->getInput('captcha'); ?>
</div>
</div>
</fieldset>
source to share