Forum

Thread tagged as: Question, Problem, Forms

Javascript on form input fields

Hi!

In my initial HTML site, I have a form which is using javascript to show/hide the default value plus change the styles on focus. A field currently looks like this:

<input type="text" class="input" title="Name" value="Your name" onfocus="if(this.value=='Your name') {this.value='', this.style.color='#5a5a5a'};" onblur="if(this.value=='') {this.value='Your name', this.style.color='#adadad';}"></input>

I've tried this with my Perch tags:

<perch:input type="text" id="name" required="true" label="Name" class="input" value="Your name" onfocus="if(this.value=='Your name') {this.value='', this.style.color='#5a5a5a'};" onblur="if(this.value=='') {this.value='Your name', this.style.color='#adadad';}" />

It adds the initial default value okay, but it's not hiding it or changing the branding on focus.

Is there a way to achieve this effect with Perch?

Thanks in advance :)
Haydn Ward

Haydn Ward 4 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, but you need to rethink your style of JavaScript a little. We don't support those event-based on attributes because they're not really the best way to go about adding JavaScript in this day and age.

My first suggestion would be to just use the HTML5 placeholder attribute, as that seems to do the same as your code above. If you want to stick with a JavaScript approach, something like this should work:

<perch:input type="text" id="name" required="true" label="Name" class="input" data-default="Your name" />

I don't know if you use a JavaScript library at all, but an example with jQuery would be:

$('input').on('focus', '[data-default]', function(){
    var self = $(this);
    if (self.val() == self.attr('data-default')) {
        self.val('');
    };
}).on('blur', '[data-default]', function(){
    var self = $(this);
    if (self.val() == '') {
        self.val(self.attr('data-default'));
    };
});
Haydn Ward

Haydn Ward 4 points

6 years ago

Thanks Drew, it was an old school hack I'd stolen off the internet. Placeholder seems a more logical thing to use, I was a little worried about backward compatibility but it seems it's pretty well supported outside of the usual IE suspects, so I'll just go with that.

One other thing though you may be able to help with whilst I have your attention, this form will appear on several pages as a shared region. Is there any way for me to capture the URL of the page using an hidden field?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

If you're using the Forms app to get the result, that will log the page it came from.
Haydn Ward

Haydn Ward 4 points

6 years ago

Thanks Drew! :D
Haydn Ward

Haydn Ward 4 points

6 years ago

Hi Drew... sorry! I've now got the same form on two pages - where in the Forms admin area does it show which page the response came from?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

It should be in the form response. Are you on the current version?
Haydn Ward

Haydn Ward 4 points

6 years ago

Yep, only installed on Monday.

All I get in the response is the date/time plus the input from my fields.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You're right, I've found the bug. I'll get it fixed for the next release.