Always text in label

[Harmen]

Hi all,

I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.

Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

I don't know how, but my icon is placed in the label, and that's not what I want.

My markup looks like this:

static protected $markup = array(
        'list' => "{out}\n",
        'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>",
        'item_label' => "<label class=input-group-addon>{out}</label>",
        'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>",
        'item_content' => "{out}",
        'item_error' => "\n<p class='field--error--message'>{out}</p>",
        'item_description' => "\n<p class='field__description'>{out}</p>",
		//.... etc
    );

and results in this:

<div class="form-group input-group">
	<label class="input-group-addon">
      	<span>
          	<i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
      	</span>
      	E-Mail
  	</label>
	<input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512">
</div>

 

and what I want is:

<div class="form-group input-group ">
        <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
        <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name">
</div>

The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....

Thanks in advance,

~Harmen

[PWaddict]

You can use jquery to remove the text.

[Harmen]

6 minutes ago, PWaddict said:

You can use jquery to remove the text.

That's an option, but I think it's better to fix this issue in the markup itself.

[rick]

Since bootstrap uses the input group addon to position the icon within the container, your code is also setting the label to email, which also appears. Removing the label entry should remove the text and leave the icon.

so 'item_label' => "<label class=input-group-addon>{out}</label>" should be 'item_label' => "<label class=input-group-addon></label>"

 

[Harmen]

16 minutes ago, rick said:

Removing the label entry should remove the text and leave the icon.

Yep, the text is gone now, and the icon too....

[rick]

In browser so couldn't test. Odd that the icon would be removed too. Try it with a &nbsp; in place of the text.

[Harmen]

3 minutes ago, rick said:

In browser so couldn't test.

No problem!

2 minutes ago, rick said:

Try it with a &nbsp; in place of the text.

Unfortunately, this works neither

 

 

[rick]

I'll test some stuff when I get home. Hopefully someone will jump in with the solution in the meantime.

 

[fbg13]

Can you post your render method?

[OLSA]

Hello for all,

don't know If I understand You well, but if you are using PW inputfields (modules/API) to build form, than to remove label from some field need to do that in two small steps. First set field label as blank (""), and after it set option "skiplabel" to "true".

Example:

$myfield->label = '';
$myfield->skipLabel = true;

Regards.

[Harmen]

@fbg13:

// === The render method that links to the render form method
public function ___render(){
	return $this->renderForm();
}

// === The renderForm() method
protected function renderForm() {
	$form = $this->BuildForm();
	$form->setMarkup(self::$markup);

	// === Pressed submit?
	if ($this->input->post->submit){
		$form->processInput($this->input->post);

		if (!$form->getErrors()){
			if ($this->sendEmail == true){
				$text = 'Configure Email options' //to do
				
			}
		}
	}
	return isset($text) ? $text : $form->render();
}

// === Build Form Method
protected function BuildForm(){    
        $form = $this->modules->get('InputfieldForm');
        $form->method = 'post';
        $form->attr('id+name', 'rma-form');

        // === Add the fields to the form
        if (is_array($this->GeneralfieldsSelector)) {
            foreach($this->GeneralfieldsSelector as $fieldName){
                if ($field = $this->fields->get($fieldName)){
                    $input = $field->getInputfield($this->page);
                    $input->attr('class', 'form-control');
                    $input->skipLabel = true;
                    $form->append($input);
                }
            }
        }

        // === Submit button
        $submit = $this->modules->get('InputfieldSubmit');
        $submit->name = 'submit';
        $submit->attr('class', 'btn btn_default');
        $submit->attr('value', 'Send RMA request');
        $form->append($submit);

        return $form;
    }

I don't think the problem is in this piece of code, but maybe I've done something wrong......

// ======

@OLSA: I've tried that mate, but it doesn't work... Thanks for your comment though!

[fbg13]

Are you using any modules, beside core ones?

[Harmen]

Yep, these are modules like Batch Child Editor, Tracy Debugger, ReCaptcha and some custom made modules. 

But I don't think any of these modules conflict with the module I am working on now.

[flydev]

With this markup and field options :

$markup = array(
	'list' => "{out}\n",
	'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>",
	'item_label' => "{out}",
	'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>",
	'item_content' => "{out}",
	'item_error' => "\n<p class='field--error--message'>{out}</p>",
	'item_description' => "\n<p class='field__description'>{out}</p>",
	'item_toggle' => ''

//.... etc
);


// field setup
$field->icon = 'envelope';
$field->label = ' ';

I get the following result :

<div class="form-group input-group">
	<span>
		<i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
	</span> 
	<input id="name" class="InputfieldMaxWidth" name="name" maxlength="2048" type="text">
</div>

 

Another idea could be to set the markup option of the label to something like {{replaceme}} {out} {{/replaceme}} and change those tags when you render the form with a str_replace or a custom function, you see ?

[fbg13]

I meant modules used to build the form.

$this->GeneralfieldsSelector I couldn't find this in the core, that's why I asked. 

'item_label' => "<label class=input-group-addon>{out}</label>",

Somewhere {out} gets replaced with

<span>
  <i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
</span>
E-Mail

You can find out where and edit/overwrite the default behavior or before you echo the form do a search and replace

str_replace( "E-Mail" , "" , $form )

Or you could just create the form yourself and have complete control over it.

[Harmen]

@fbg13, you're a real hero!  

EDIT: Uh, I meant also @flydev, your code did the trick. 

Now it looks like it should look! Thanks!

I think the space between the ' ' did the trick, I am not sure but I will spend this evening to figure out what I did wrong.

 

13 hours ago, fbg13 said:

$this->GeneralfieldsSelector I couldn't find this in the core, that's why I asked. 

I am building this module to make the process for handling RMA's in my company easier. So I am creating a module and $this->GeneralfieldsSelector grabs all the fields that are selected in the module settings to show them on the frontend. I didn't want to build the form itself because maybe I will also release this module here on PW and than is this a bit better than a custom made HTML-form XD

Edited August 8, 2017 by Harmen
Forgot to tag someone