Support

Account

Home Forums General Issues Accessing field values with HTML DOM and jQuery

Solved

Accessing field values with HTML DOM and jQuery

  • I am having a difficult time trying to access or reference the fields after they are loaded onto a post edit page. I’m new to use JQuery and was hoping thst someone could point me in the right direction.

    I know how to enqueue my scripts, but the only thing I’ve been able to do is get an alert to appear with straight-up Javascript.

    For example:
    I have a text field with the name: total.
    I want to change the value at some point.

    How do I reference that field in a script?

    I’ve tried the following:

    With JQuery:

    $(document).ready(function($){
        	$('#acf-field-total').val("text here");
    })(jQuery);

    With HTML DOM:

    document.getElementById("acf-field-total").value ="text here";

    Neither works.

  • The fields do not use the field name in the ID. For single fields, like a text field you would use $('#acf-field_1234567890abc') where the part after #acf- is the field key. This will work for any field that has a single input like a text, or number field. For others you may need to use something like $('[data-key="field_1234567890abc"] input') for fields like radio and checkbox fields.

    The key here is that the fields use the field key and not the field name. Use and inspector like Firebug in Firefox to inspect what you’re trying to get.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.