Formit - How to use 2-word label value when Formit tag seems to want 1-word

342 Posts

Willi Waizenegger Reply #1, 13 years, 9 months ago

The site design I'm working on calls for having some form fields having each form label inside each field, then having the label disappear when the user clicks within the field (onfocus). I'm sure you've all seen this effect a million times. I found the following code on this site:

http://css-tricks.com/snippets/javascript/clear-field-on-focus/

which looks like this:

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

...and works great. However, when I use Formit, each Formit tag seems to want to be a one-word value. For instance, if I want a label that reads 'First Name' (2 words), the above code doesn't seem to mind. However, the Formit tag seems to want it to be a one-word value, for instance:

<input id="firstName" name="firstName" type="text" value="[[+fi.firstName]]" />

Obviously, I don't want the label inside the field to read

[[+fi.firstName]]

...which is what ends up happening. How would you handle this? Or is there a better way to do what I'm trying to accomplish?

Thank you in advance.

MODx Revo: 2.2.5-pl
Formit: 2.1.2 [ed. note: waizen last edited this post 13 years, 9 months ago.]

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 9 months ago

So if I understand correctly you just want a placeholder text inside the input field right? Why not just use HTML5 placeholder property?

If not have you tried using something like this:

<input type="text" onfocus="if(this.value == 'First Name') { this.value = ''; }" value="[[+fi.firstName]]First Name" />

I haven't tested this so IDK if this might work but it's worth a shot, the placeholder option will definitely work but not on older browsers.

If that doesn't work your only other option I can think of would be to use a pre-hook to populate the input with the text you want.

Good Luck

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

342 Posts

Willi Waizenegger Reply #3, 13 years, 9 months ago

Thank you for responding, benmarte. I think that's what I want but I'm going to have to test it. BTW: not that it matters with your solution, since it would probably work the same, but I mistakenly displayed the wrong onfocus code in my original post. It should have been:

<input name="First Name" type="text" class="footer_form_first_name" onfocus="if (this.value=='First Name') this.value = ''" onblur="if (this.value=='') this.value = 'First Name'" value="First Name">

...not:

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

342 Posts

Willi Waizenegger Reply #4, 13 years, 9 months ago

Thanks again, Benjamin, for responding the other day. I just tried your solution and it works...up to a point.

The label appears and disappears from the field as it should. When I test the form, the information passes great.

The only issue now is with validation. It is a required field and if I don't add anything in there and press submit, that field doesn't get flagged as not having anything entered. In addition, it re-enters the label twice within the field, like this: "First NameFirst Name". At that point, if I click within the field, the label doesn't go away. It acts as if it was an entry I typed it.

So, getting close but needs tweaking. Here is how the code looks at this point:

[[!FormIt?  
&hooks=`spam,FormSave,email,emailUser,redirect`
&emailSubject=`Submission from The XXXXXX Contact Form`
&emailTpl=`EmailChunk`
&emailTo=`[email protected]`
&redirectTo=`1`
&fsFormTopic=`Contact`
&fsFormFields=`firstName,lastName,email,telephone,street,cityTown,state,zipcode,country,text` 
&validate=`firstName:required,
lastName:required,
telephone:required,
email:required`
]]


[[!+fi.error.error_message:notempty=`
<p>[[!+fi.error.error_message]]</p>
`]][[!+fi.error.rampart]]

<input name="nospam:blank" type="hidden" />
<label for="First Name"><span class="error">[[+fi.error.firstName]]</span></label>
<input name="firstName" type="text" class="footer_form_first_name" onfocus="if (this.value=='First Name') this.value = ''" onblur="if (this.value=='') this.value = 'First Name'" value="[[+fi.firstName]]First Name">

...etc...

☆ A M B ☆
894 Posts

benmarte Reply #5, 13 years, 9 months ago

Then you you will need to make a pre-hook to populate the input text field with First Name and then have a custom hook to validate the form on submission to check if the text still equals First Name in order to make the submission fail.

That will work for sure, just make sure you change this:

<input name="firstName" type="text" class="footer_form_first_name" onfocus="if (this.value=='First Name') this.value = ''" onblur="if (this.value=='') this.value = 'First Name'" value="[[+fi.firstName]]">

Once you make the pre-hook and custom validation hook.

Good Luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX