Insert label in input

Hi !

Me again ;-)

I was wondering if it is possible to insert the label directly in the input (for textbox and textarea) instead of the label on the side. I know how to do it with "value" and "mouseover" but the problem is that the validation it's not working with that because the field is not empty (the value of the input is always there even if the user enter nothing).

Is there a way to do it directly with chronoform or should I modify the validation core ?

Thanks again

Hi mushr00m,

There's a tutorial that you can buy here that covers one way of doing this in CFv3 & CFv4.

Bob

I did that and I'll try your JS :wink:

So I tried it and it's working, taking the label and put it in the input. But when I enter nothing the form still pass the validation.... I don't know why

Hi Mushr00m ,

Please post a link to the form so I can take a quick look.

Bob

Sorry no link, it's on a local machine. If you want I can send the code by Email ? I didn't find a Support Email on your Tuto PDF.

Hi Mushr00m,

There are PM and email links under my picture to the right >>>>>

A backup may not help as it's most likely a JavaSCript problem with something else on the site.

Bob

I sent you an Email

Hi Mushr00m,

I got the email thank you but I don't have time to rebuild your form from the parts. Please take a Form Backup using the icon in the Forms Manager and post it here (as a zipped file) or PM or email it to me and I'll take a closer look.

Bob

I send it to you by mail.

Thanks

Hi Mushr00m,

There is no id set for the submit button. Please add it as 'submit' in the element configuration.

Bob

Hahaha !

So sorry I found the problem 3min just before reading your post... I tried the debugger from chrome and found the error ^^

Sorry ans thanks for your good tuto and help ;-)

EDIT : Where is the button to put the topic as solved ?

I found out a little issue with your code, you use "mouseout" for the submit button, causing the all inputs to be empty until the user leave the submit button... I tried with "release" but it's not working, do you you know what is the event for releasing the click button ?

Thanks

Hi mushr00m,

I forget why I used that event now :-(

You can try onClick event; you can't use onSubmit as the validation uses that.

Bob

No it's not possible because you use the "click" event to empty the field if they are the same as the label before the validation and when the mouse leave the button you put them back, so we need to have 2 separate event. One on the click and one on the release.

Hi mushr00m,

That makes sense, onChange might work or possibly onBlur though my experience is that onBlur is only triggered when another input is focused or the maouse clicks outside the control.

Bob

Hi Bob,

So there are no way to do it "properly" ? There is no way to check the input when the mouse is clicked and fill them again when it's released ?

I've a little something with "mousedown" and "mouseup"... I will tell you if it's OK

Hi GreyHead,

I'm trying to use your tutorial about placeholder labels but I can't. I think I understand what it does but it doesn't work for me.

Where must I place the JS code? Maybe in adition of HTML text into script labels?

I mean...

<label class="full_label">Acepto las Condiciones</label><div class="clear"></div><div id="error-message-cbConditions"></div></div><div class="ccms_form_element cfdiv_submit" id="sbsend_container_div"><input name="sbSend" id="sbSend" class="" value="Enviar" type="submit" />
<div class="clear"></div><div id="error-message-sbSend"></div></div>
<script language = "JavaScript">
window.addEvent('domready',function() {
...

Thanks for your help.

Hi seralso,

If you are using ChronoForms v4 then I updated the sample form yesterday - please see this post

Bob

Thanks a lot. It's working right now.

One more question... how can I change the date format from the datepicker?.

Thanks again.

Edited: I've found that other post http://www.chronoengine.com/forums.html?cont=posts&f=26&t=22057