• ValPE

• in reply to: Frontend form – post via ajax?
• December 13, 2017 at 8:28 pm

Hi @pooledge,
I have find a solution for you. The problem is the serialization of the file. If you want to bypass this you have to use ‘FormData’. This code works for me with the basic uploader :

acf.add_action('submit', function($form){

            var formdata = new FormData($form[0]);

            $.ajax({
                url: window.location.href,
                method: 'post',
                data: formdata,
                cache: false,
                processData: false,
                contentType: false,
                success: function(data) {
                    acf.validation.toggle($form, 'unlock');
                    $form.prepend('<div class="acf-error-message -success">' + data + '</div>');
                    $('html,body').animate({
                        scrollTop: $form.offset().top - 150
                    }, 500);
                    $('.acf-form button[type="submit"]').prop('disabled', false);

                }
            });
        });

I hope this code will help you! 😉 Thanks!

• ValPE

• in reply to: Frontend form – post via ajax?
• December 13, 2017 at 7:46 pm

Hi @phylaxis,

I have a custom validation message save in custom field settings.
It’s maybe not the best solution but it’s works fine for me!

add_action('acf/render_field_settings', '_pit_add_field_setting_for_error_message');
function _pit_add_field_setting_for_error_message( $field ) {

    $args = array(
        'type' => 'text',
        'label' => 'Erreur formulaire',
        'name' => 'error_form',
        'instructions'	=> 'Erreur affiché a l\'utilisateur lors du remplissage du formulaire',
        'required' => 0,
        'default_value' => "Veuillez remplir ce champ"
    );
    acf_render_field_setting($field, $args, false);

}

add_filter('acf/validate_value', '_pit_acf_form_error_message', 10, 4);
function _pit_acf_form_error_message( $valid, $value, $field, $input ){

    if(!$valid)
        $valid = $field['error_form'];

    return $valid;

}

The first hook set the field and the second one print the error if the field is not valid. It’s works for me in AJAX form. I hope this code will help you. If you have a best way to to it I’m more than interrested!

I have try to set the field only when is required but it was a fail for me.. It’s works only when the field is save one time.

Sorry @pooledge I have try with the basic uploader and it’s doesn’t works for me too.

Thanks! 😉

• ValPE

• in reply to: Frontend form – post via ajax?
• November 10, 2017 at 12:58 am

Hi @rasso & @danielrutkowski,

I have used your code to do some tests and I finally modify it to limit the number of Ajax call :

	acf.do_action('ready', $('body'));

    $('.acf-form').on('submit', function(e){
        e.preventDefault();
    });

	acf.add_action('submit', function($form){
		$.ajax({
			url: window.location.href,
			method: 'post',
			data: $form.serialize(),
			success: function(data) {
				acf.validation.toggle($form, 'unlock');
                alert(data);
			}
		});
	});

In the actual code the AJAX success has no response data. If you want to get the “update message” set in the form declaration you can use this hook :

add_action('acf/submit_form', 'my_acf_submit_form', 10, 2);
function my_acf_submit_form( $form, $post_id ) {

    if(is_admin())
        return;

    //Test if it's a AJAX request.
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        echo $form['updated_message'];
        die();
    }

}

I hope this code can help you! 😉