onblur dynamic text fill?

• sja

• February 10, 2014 at 8:54 pm

Hi Eliot,

I was just wondering if you’d be able to suggest a method as to how I might fill a text field dynamically based on another text fields value.

For example:
I’m creating a listing for a car. I have 2 fields on my custom post type. One for kilometres and one for miles.

I’d like it if the admin only had to fill in one of these fields i.e. if I fill in miles, tab out of that field of click on another field, kilometres if filled after a calculation based on the miles entered.

Is that possible within ACF?

Many thanks,

S

• Elliot

• February 11, 2014 at 9:55 am

Hi @sja

ACF does not offer this kind of functionality, however, you can easily add some custom jQuery to the page.

jQuery can be used to add events to elements such as blur.

Further questions regarding this matter would be best asked on a stackoverflow forum, as many web developers are actively posting code and solutions for jQuery.

Thanks
E

• sja

• February 11, 2014 at 10:04 am

Ok thanks.

I just meant an onblur event , opposite of onfocus. So when the user tabs out of a field. Not an actual blur effect.

The conversion and coding are quite straight forward, I’m just no clear where I’d put the code as it’s being created by ACF.

Here’s a version of what I mean. Fill in the miles tab to the Kilometres and it auto fills.

Would you be able to suggest where or what I might target using the ACF plugin?

Thanks again.

• sja

• February 11, 2014 at 10:45 am

I guess what I’m asking is where in your plugin is the HTML I can see when looking at my post page with my text field on created.

I’d like to add:
onblur="myFunction()"

to this HTML created by ACF
<input type="text" id="acf-field-miles" class="text" name="fields[field_52f526e67d916]" value="8000" placeholder="e.g 10,000" testing="">

Is it line 79 in text.php?

I can’t seem to work out where exactly that is created. Sorry 🙁

• Elliot

• February 12, 2014 at 3:55 pm

Hi @sja

jQuery is a JS library that allows you to place event listeners on elements. One of these events is called ‘blur’. This is for when you blur out of an input field.

There is no need to add an onblur attribute to the element, this is ‘old school’. Instead, use jQuery to attach an event listener to the element.

Please refer to Google for any more help with the blur event.

Thanks
E