0

I am building a custom registration form for users where they have to upload an image of government ID. Using AJAX for submission.

The handler function always returning a 404 status error, no matter what. Whereas, the user gets registered and the file gets uploaded. Please tell me where I am doing wrong?

Here are my codes..

Form HTML:

<div class="col-lg-6 offset-lg-3 mt-4">
    <form id="vrform" enctype="multipart/form-data" method="post" action="">
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_firstname" type="text" placeholder="First name*" required>
        </div>
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_lastname" required type="text" placeholder="Last name*">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_vmail" required type="email" placeholder="Email ID*">
        </div>
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_phone" required type="tel" placeholder="Contact Number*">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_businessname" type="text" placeholder="Business Name (If applicable)">
        </div>
        <div class="col-sm-6 form-group autocomplete">
            <input class="form-control" type="text" placeholder="Type of Payment" id="myInputpay" name="reg_myInputpay" >
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_address" required type="text" placeholder="Street address line 1*">
        </div>
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_address1" type="text" placeholder="Street address line 2">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_city" required type="text" placeholder="City/Village/Town">
        </div>
        <div class="col-sm-6 form-group autocomplete">
            <input class="form-control" id="myInput" type="text" name="reg_country" required placeholder="Country*">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 form-group">
            <input class="form-control" name="reg_password1" required type="password" placeholder="Password">
        </div>
        <div class="col-sm-6 form-group autocomplete">
            <input class="form-control" name="reg_password2" required type="password" placeholder="Confirm Password">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="border p-4 mb-3">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <input class="form-control" type="text" name="reg_govtid" placeholder="Government Issued ID Number" required>                      
                        <label class="mt-1 ml-3">
                            <i><small>Upload Supporting Government ID*</small></i></label>
                        <input class="form-control" id="govtiddoc" name="reg_govtiddoc" type="file" placeholder="" required>
            <p class="ulresponse"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 form-group termsandconditionscheck">
            <label><input name="reg_tc" required type="checkbox" class="mr-2" checked>By creating an account, you agree to our <a href="#">terms & conditions.</a></label>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-12 form-group">
            <?php wp_nonce_field( 'pnvr', 'pnvr' );?>
            <input type="submit" class="btn btn-block btn-success text-uppercase pt-2 pb-2 btn-lg" value="REGISTER">
            <img id="rsubmit" class="d-none mx-auto" alt="Loading.." src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/ajax.gif">
            <div id="resmsg"></div>
        </div>
    </div>
    </form>
</div>

jQuery

<script>
jQuery(document).ready(function($) {
    var vrForm = $('#vrform');
    $(vrForm).submit(function(e) {
        e.preventDefault();
        $('#resmsg').html('');
        var pass = $('input[name="reg_password1"]').val();
        var pass2 = $('input[name="reg_password2"]').val();
        if ( pass.length < 8 ) {
            $('#resmsg').html('<span class="text-danger">Password should be 8 charecters or more.</span>');
            $('input[name="reg_password1"]').focus();
            return false;
        }
        if ( pass != pass2 ) {
            $('#resmsg').html('<span class="text-danger">Passwords doesn\'t match.</span>');
            $('input[name="reg_password2"]').focus();
            return false;
        }
        $('#rsubmit').removeClass('d-none').addClass('d-flex');
        
        var myformData = new FormData(vrForm[0]);
        myformData.append('action', 'pn_reg_vendors');
        
        $.ajax({
            type: "POST",
            data: myformData,
            dataType: "json",
            url: ajaxurl,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            success: function(data, textStatus, jqXHR) {
                $('#rsubmit').removeClass('d-flex').addClass('d-none');
                if (data == 'success' ) {
                    $(vrForm)[0].reset();
                    $('#resmsg').html('<span class="text-success">Registration successful. You\'ll receive and email once your account is approved.</span>');
                } else if ( data == 'exists' ) {
                    $('input[name="reg_vmail"]').focus();
                    $('#resmsg').html('<span class="text-danger">This email already exists.</span>');
                } else {
                    $('#resmsg').html('<span class="text-danger">Something went wrong. Please reload the page and try again.</span>');
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                //if fails     
            }
        });
        
    });
});
</script>

Handler Function:

function pn_reg_vendors() {
    
    $status = '';
    if ( !wp_verify_nonce( $_POST['pnvr'], 'pnvr' ) ) {
        $status = 'failed';
    } else {
        $usere = get_user_by( 'email', $_POST['reg_vmail'] );
        if ( $usere ) {
            $status = 'exists';
        } else {
            
            $first_name = $_POST['reg_firstname'];
            $last_name = $_POST['reg_lastname'];
            $email = $_POST['reg_vmail'];
            $phone = $_POST['reg_phone'];
            $business = $_POST['reg_businessname'];
            $paymentType = $_POST['reg_myInputpay'];
            $address = $_POST['reg_address'];
            $address1 = $_POST['reg_address1'];
            $city = $_POST['reg_city'];
            $country = $_POST['reg_country'];
            $password = $_POST['reg_password1'];
            $govtid = $_POST['reg_govtid'];
            
            $user_id = wp_insert_user(array(
                'user_pass' => $password,
                'user_login' => $email,
                'user_nicename' => strtolower( str_replace( ' ', '-', $first_name . '-' . $last_name )),
                'user_email' => $email,
                'display_name' => $first_name . ' ' . $last_name,
                'nickname' => $first_name,
                'first_name' => $first_name,
                'last_name' => $last_name,
                'show_admin_bar_front' => false,
                'role' => 'pending',
            ));
            
            if ( !is_wp_error($user_id) ) {
                
                require_once( ABSPATH . 'wp-admin/includes/image.php' );
                require_once( ABSPATH . 'wp-admin/includes/file.php' );
                require_once( ABSPATH . 'wp-admin/includes/media.php' );
                $atid = media_handle_upload( 'reg_govtiddoc', 0 );
                if ( is_wp_error( $atid ) ) {
                    $imgid = '';
                } else {
                    $imgid = $atid;
                }
                
                update_user_meta( $user_id, '_pn_first_name', $first_name );
                update_user_meta( $user_id, '_pn_last_name', $last_name );
                update_user_meta( $user_id, '_pn_email', $email );
                update_user_meta( $user_id, '_pn_phone', $phone );
                update_user_meta( $user_id, '_pn_business_name', $business );
                update_user_meta( $user_id, '_pn_payment_type', $paymentType );
                update_user_meta( $user_id, '_pn_address', $address );
                update_user_meta( $user_id, '_pn_address1', $address1 );
                update_user_meta( $user_id, '_pn_city', $city );
                update_user_meta( $user_id, '_pn_country', $country );
                update_user_meta( $user_id, '_pn_govtid', $govtid );
                update_user_meta( $user_id, '_pn_govtid_img', $imgid );
                
                $status = 'success';
            } else {
                $status = 'failed';
            }
        }
    }
    //header('Content-Type: application/json');
    echo json_encode($status);
    wp_die();
}
//add_action( 'wp_ajax_pn_reg_vendors', 'pn_reg_vendors' );
add_action( 'wp_ajax_nopriv_pn_reg_vendors', 'pn_reg_vendors' );
  • If your handler does get executed, then it's probably a plugin or custom code that caused the error 404 - are you very sure it's 404 and that it's not actually from another request on the page? Try inspecting the network requests. – Sally CJ Jun 17 at 0:10
  • @SallyCJ I already inspected network requests. Cleaned the network request log before initiating the AJAX call. There are no other simultaneous request. I guess the problem is with the file upload part. If I comment out that section, the codes fully work. – Abhik Jun 17 at 9:04
  • Honestly, your code seems fine to me, so I suggest you to try deactivating your plugins to check if it's a plugin issue. – Sally CJ Jun 17 at 10:03
0

I can't find the define of the ajaxurl variable. The 404 is inevitable.

Usually, you need to define it in your function or directly in a wp_localize_script action.

Dont't forget to replace the wp_ajax_pn_reg_vendors, to make it work, even the user is not yet connect.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.