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' );
