• gazaian1

• in reply to:
• December 1, 2018 at 12:49 am

My boss purchased ACF PRO and i am using it to build out a multi-step form but the issue is acf doesn’t support multi-step forms out of the box. So what i have done is made my own custom validation using PHP AND JQUERY AJAX and this works fine for text fields but i can’t seem to get the data from the image field type.

Please view my code below and let me know if i am doing anything wrong. I just can’t seem to get the image data to store in the wordpress media library, image value is always empty.

Jquery:

$(“.nexttwo”).on(‘click’,function(){
resetErrors();

current_fs = $(this).parent();
next_fs = $(this).parent().next();
var comid = getUrlParameter(‘cid’);

var form = $(‘#ep-company-form’);

var companydata = new FormData(form[0]);
companydata.append(‘file’, document.getElementById(“acf-field_5bef0fac743f7”).files[0]);
companydata.append(“action”, “company_info”);
companydata.append(“cid”, comid);

$.ajax({
url: ajaxurl,
method: ‘post’,
data: companydata,
processData: false,
contentType: false,
dataType: ‘json’,
success: function(data){
//console.log(JSON.stringify(data));
for (var i = 0; i < data.length; i++) {
var status = data[i].code;
var field = data[i].field;
var message = data[i].msg;
//var comid = data[i].cid;

if (status == “200”){
//successful validation
if(animating) return false;
animating = true;

//activate next step on progressbar using the index of next_fs
$(“#progressbar li”).eq($(“fieldset”).index(next_fs)).addClass(“active”);

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 – stored in “now”
//1. scale current_fs down to 80%
scale = 1 – (1 – now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+”%”;
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 – now;
current_fs.css({‘transform’: ‘scale(‘+scale+’)’});
next_fs.css({‘left’: left, ‘opacity’: opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: ‘easeInOutBack’
});
} else {
var msg = ‘<label class=”acf-notice -error acf-error-message error” for=”‘+field+'”>’+message+'</label>’;
$(‘input[name=”‘ + field + ‘”], select[name=”‘ + field + ‘”]’).addClass(‘acf-error’).before(msg);
}
}
}
});
});`

<strong>PHP:</strong>

function company_info($post_id){
if( isset($_POST[‘cid’]) )
$post_id = $_POST[‘cid’];

// These files need to be included as dependencies when on the front end.
require_once( ABSPATH . ‘wp-load.php’);
require_once( ABSPATH . ‘wp-admin/includes/file.php’ );
require_once( ABSPATH . ‘wp-admin/includes/image.php’ );
require_once( ABSPATH . ‘wp-admin/includes/media.php’ );

//Prepare company info
$cname = strtolower($_POST[‘acf’][‘field_5bef0f8c743f6’]);
$clogo = $_POST[‘acf’][‘field_5bef0fac743f7’];
$cwebsite = $_POST[‘acf’][‘field_5bef100b743f8’];
$cphone = $_POST[‘acf’][‘field_5bef1032743f9’];
$caddress = $_POST[‘acf’][‘field_5bef108a743fa’];

$errorMSG = [];

/* COMPANY NAME */
if ( empty($cname) ) {
$errorMSG[] = array(‘code’ => 404, ‘field’ => ‘acf[field_5bef0f8c743f6]’, ‘msg’ => ‘Company name is required’);
}

/* COMPANY LOGO */
if ( empty($clogo) ) {
$errorMSG[] = array(‘code’ => 404, ‘field’ => ‘acf[field_5bef0fac743f7]’, ‘msg’ => ‘Company logo is required’);
}

$success = [];

if( empty($errorMSG) ){
$uploadedfile = $_FILES[‘acf[field_5bef0fac743f7]’];
$upload_name = $_FILES[‘acf’][‘name’][‘field_5bef0fac743f7’];

$uploads = wp_upload_dir();
$filepath = $uploads[‘path’].”/$upload_name”;

$upload_overrides = array( ‘test_form’ => false );
$movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

if ( $movefile && !isset( $movefile[‘error’] ) ) {

$file = $movefile[‘file’];
$url = $movefile[‘url’];
$type = $movefile[‘type’];

$attachment = array(
‘post_mime_type’ => $type ,
‘post_title’ => $upload_name,
‘post_content’ => ‘File ‘.$upload_name,
‘post_status’ => ‘inherit’
);

$attach_id = wp_insert_attachment( $attachment, $file, 0);
$attach_data = wp_generate_attachment_metadata( $attach_id, $file );
wp_update_attachment_metadata( $attach_id, $attach_data );

}

file_put_contents($filename, $attach_id);

update_field(‘field_5bef0fac743f7’, $attach_id, $post_id);

update_field(‘field_5bef0f8c743f6’, $cname, $post_id);
update_field(‘field_5bef100b743f8’, $cwebsite, $post_id);
update_field(‘field_5bef1032743f9’, $cphone, $post_id);
update_field(‘field_5bef108a743fa’, $caddress, $post_id);

$success[] = array(‘code’ => 200);
echo json_encode($success);

exit();
}

echo json_encode($errorMSG);

exit();
}
add_action(‘wp_ajax_company_info’, ‘company_info’);
add_action(‘wp_ajax_nopriv_company_info’, ‘company_info’);
add_action(‘acf/save_post’ , ‘company_info’, 20 );`

• gazaian1

• in reply to: Frontend form – post via ajax?
• November 21, 2018 at 9:09 am

Hey Guys,

Is there away to get the newly created post ID in the ajax success call or even to send it to php?

• gazaian1

• in reply to: Trigger verification of the form without submitting it
• November 21, 2018 at 7:47 am

@ninobysa Would you mind sharing your full code?

• gazaian1

• in reply to: Trigger verification of the form without submitting it
• August 3, 2018 at 3:55 am

@ninobysa did you ever figure it out?

• gazaian1

• in reply to: Trigger verification of the form without submitting it
• July 22, 2018 at 3:28 am

Hey ninobysa,

I am still working on my multistep form, i realized that i would need to create my own validation.

$(".nextone").click(function(e){
        e.preventDefault();

            $.ajax({
                dataType: 'json',
                type: 'POST',
                url: ajaxurl,
                data: {
                    action: 'epm_registration_process',
                    epformdata: $('#field-group-1 input, #field-group-1 select').serialize()
                },
                success: function(resp) {
                    if (resp === true) {
                        //successful validation
                        if(animating) return false;
                        animating = true;
                        
                        current_fs = $(this).parent();
                        next_fs = $(this).parent().next();
                        
                        //activate next step on progressbar using the index of next_fs
                        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
                        
                        //show the next fieldset
                        next_fs.show(); 
                        //hide the current fieldset with style
                        current_fs.animate({opacity: 0}, {
                            step: function(now, mx) {
                                //as the opacity of current_fs reduces to 0 - stored in "now"
                                //1. scale current_fs down to 80%
                                scale = 0.8 + (1 - now) * 0.2;
                                //2. bring next_fs from the right(50%)
                                left = (now * 50)+"%";
                                //3. increase opacity of next_fs to 1 as it moves in
                                opacity = 1 - now;
                                /*current_fs.css({
                                    'transform': 'scale('+scale+')',
                                    'position': 'absolute'
                                });*/
                                next_fs.css({'opacity': opacity});
                            }, 
                            duration: 0, 
                            complete: function(){
                                current_fs.hide();
                                animating = false;
                            }, 
                            //this comes from the custom easing plugin
                            easing: 'easeInOutBack'
                        });
                        return false;
                    } else {
                        $.each(resp, function(i, v) {
                            console.log(i + " => " + v); // view in console for error messages
                            if( $('input[name="' + i + '"], select[name="' + i + '"]').hasClass('inputTxtError') ){}else{
                                var msg = '<div class="acf-notice -error acf-error-message"><p>'+v+'</p></div>'
                                $('input[name="' + i + '"], select[name="' + i + '"]').addClass('inputTxtError').before(msg);
                            }
                        });
                        var keys = Object.keys(resp);
                        $('input[name="'+keys[0]+'"]').focus();
                    }
                    return false;
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                }
            });
            return false;

    });

PHP CODE:

function epm_registration_process($post_id){
    //Prepare basic user info
    $username = strtolower($_POST['acf']['field_5b4be98fd288c']);
    $firstname = $_POST['acf']['field_5b4be9d8d288d'];
    $lastname = $_POST['acf']['field_5b4be9e8d288e'];
    $email = $_POST['acf']['field_5b4be9f7d288f'];
    $password = $_POST['acf']['field_5b4bea0bd2890'];
    $cpassword = $_POST['acf']['field_5b4bea8bd2891'];

    $error = array();
    //IMPORTANT: You should make server side validation here!
    if( empty($username) ){
        $_SESSION['errors']['acf[field_5b4be98fd288c]'] = "Please enter a username";
    }elseif(username_exists( $username )){
        $_SESSION['errors']['acf[field_5b4be98fd288c]'] = "Username already exist";
    }

    if( empty($firstname) ){
        $_SESSION['errors']['acf[field_5b4be9d8d288d]'] = "Please enter your firstname";
    }

    if(count($_SESSION['errors']) > 0){
	    //This is for ajax requests:
        if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
            echo json_encode($_SESSION['errors']);
            exit();
        }
	    //This is when Javascript is turned off:
        echo '<ul>';
        foreach($_SESSION['errors'] as $key => $value){
            echo '<li>' . $value . '</li>';
        }
            echo '</ul>';
        exit();
    }else{
	//form validation successful - process data here!!!!
   
       
    }   
}
add_action('wp_ajax_epm_registration_process', 'epm_registration_process');
add_action('wp_ajax_nopriv_epm_registration_process', 'epm_registration_process');
add_filter('acf/pre_save_post' , 'epm_registration_process', 10, 1 );

I am stuck at how can i get $_POST data if form does not submit the normal way hence i cannot validate against a user already existing in the database etc… i am only able to check if the field is empty