Jump to content
Harmen

Always text in label

Recommended Posts

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:

e1ef4dc55d20797eadbe5b755f503124.png
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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>"

 

Share this post


Link to post
Share on other sites
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....

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

 

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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!

3421487a758e78b66d16388df0ae9bcb.png

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 by Harmen
Forgot to tag someone
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By benbyf
      Hi, Looking to create form elements on a page–some input with a colection of form inputs and the appropriate labels and variables for that input. I've used ProForms in the past and rolled out my own when creating simply one off forms, but I wonder if anyone has found a good way of allowing form creation on page editing so that clients can adhocly make and edit forms?
      Thanks
    • By Mithlesh
      Changing it to null
    • By Tyssen
      I have a page that contains a single ProFields table field and I want to display the contents of the table on the front end and then for logged in users, they can edit certain columns in the table.
      What I have at the moment is
      $out = '<form action="'.$page->url.'" method="post" > <table class="table"> <tbody>'; $count = 1; foreach($page->fieldName as $row) : $out .= ' <tr> <td><input type="checkbox" name="fieldName_'.$count.'_columnName"></td> </tr>'; if($input->post->submit) : $page->of(false); $page->set('fieldName_'.$count.'_columnName', $sanitizer->text($input->post->{fieldName_'.$count.'_columnName})); $page->save(); endif; $count++; endforeach; $out .= ' </tbody> </table> <button class="button" type="submit">Save</button> </form>'; The two problems I have are:
      I get an error trying from $sanitizer->text($input->post->{fieldName_'.$count.'_columnName}), not sure how to make that dynamic.  If I change the above to just a static value, e.g. $page->set('fieldName_1_columnName', 'Testing') and save the form, it's not saving the values to the database. Where am I going wrong?
    • By VeiJari
      Hello forum. I'm trying to figure out how to detect if current form has errors after saving it in pw admin page. This is so that our event location isn't added in database if we detect errors. But I can't seem to find a correct way to detect errors? I only found the wire()->errors() and it always triggers even if I don't have any errors. 
      How can I detect errors in a form?
      By error I mean $page->error('this is the red error');
    • By Demo
      Hi,
      I'm looking for a developer for a quick project. Developer would be responsible to create a new form on exiting process wire site which on submit would send data to sales force. We already have the HTML code for the form and action/REST API build. 
      Thank you
      Rajesh
×
×
  • Create New...