自定义模板表单提交到Wordpress中的数据库

Question

I am creating a custom form template in WordPress and I have these codes.

page-register.php

 <form class="RegForm" method="post" action="" >
        <br>
        <h2 style ="">Registration Form </h2>
        <div class ="col-md-3" style="clear:both;">
            <label style="font-size:12px;"> First Name:</label>
            <input type="text" id="RF_FName" name="RF_FName" />
            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">Middle Name:</label>
            <input type="text" id="RF_MName" name="RF_MName" /> 
            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">Last Name:</label>
            <input type="text" id="RF_LName" name="RF_LName" />
            </div>
            <br><br>
            <div class ="col-md-3" style="clear:both;">
            <label style="font-size:12px;"> Password:</label>
            <input type="Password" id="RF_Pass" name="RF_Pass" />

            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">Confirm Password:</label>
            <input type="Password" id="RF_CPass" name="RF_CPass" /> 
            </div>

            <br><br>
            <div class ="col-md-3" style="clear:both;">
            <label style="font-size:12px;">Email ID:</label>
            <input type="text" id="RF_Email" name="RF_Email" />
            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">Contact No:</label>
            <input type="text" id="RF_Contact" name="RF_Contact" />
            </div>
            <br><br>
            <div class ="col-md-3" style="clear:both;">
            <label style="font-size:12px;">Address 1:</label>
            <input type="text" id="RF_Address1" name="RF_Address1" />
            </div>
            <div class ="col-md-3" >
            <label style="font-size:12px;">Address 2:</label>
            <input type="text" id="RF_Address2" name="RF_Address2" />
            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">Address 3:</label>
            <input type="text" id="RF_Address3" name="RF_Address3" />
            </div>

            <br><br>

            <div class ="col-md-3" style="clear:both;">
            <label style="font-size:12px;">Pin Code:</label>
            <input type="text" id="RF_Pin" name="RF_Pin" />
            </div>
            <div class ="col-md-3" >
            <label style="font-size:12px;">City:</label><br>
            <input type="text" id="RF_City" name="RF_City" />
            </div>
            <div class ="col-md-3">
            <label style="font-size:12px;">State:</label><br>
            <input type="text" id="RF_State" name="RF_State" />
            </div>
            <br><br>
            <div class ="col-md-3"style="clear:both;" ></div>

            <br> <br>
            <div class ="col-md-3" style="clear:both;" >
            <input  id="RegisterUser" type="submit" Value="Register" name="submit" />
            </div>

        </form>

RegisterUser.js

   jQuery(document).ready(function($){

var RegisterUser = document.getElementById('RegisterUser');

var ajaxFunctionformprocess = function(fromdata, action){
    $.ajax({
        type:'post',
        url: Registerform.url,
        data:{
            action:action,
            data:fromdata,
            security:Registerform.security,

        },
        success:function(reponse){
            $('div.msg').html(reponse);
        },
        error:function(response){
            alert(response);
        }

    });
}

RegisterUser.addEventListener('click', function(event){
    event.preventDefault();
    var fromdata = {
        'Reg_FName':document.getElementById('Reg_FName').value,
        'Reg_MName':document.getElementById('Reg_MName').value,
        'Reg_LName':document.getElementById('Reg_LName').value,
        'Reg_Password':document.getElementById('Reg_Password').value,
        'Reg_CPassword':document.getElementById('Reg_CPassword').value,
        'Reg_Email':document.getElementById('Reg_Email').value,
        'Reg_Contact':document.getElementById('Reg_Contact').value,
        'Reg_Address1':document.getElementById('Reg_Address1').value,
        'Reg_Address2':document.getElementById('Reg_Address2').value,
        'Reg_Address3':document.getElementById('Reg_Address3').value,
        'Reg_Pin':document.getElementById('Reg_Pin').value,
        'Reg_City':document.getElementById('Reg_City').value,
        'Reg_State':document.getElementById('Reg_State').value,
        'Reg_Country':document.getElementById('Reg_Country').value,
    };
    ajaxFunctionformprocess(fromdata, 'form_Register_function');    

    });

 });            

functions.php

    function RegisterForm_style_andscripts(){
//wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_script('ajax-function',  get_stylesheet_directory_uri() . '/js/RegisterUser.js', array('jquery'), '1.0', true );
wp_localize_script( 'ajax-function', 'Registerform', array(
    'url'=> admin_url('admin-ajax.php'),
    'security'=> wp_create_nonce('our-nonce')
  ) );
 }

 add_action('wp_enqueue_scripts','RegisterForm_style_andscripts');


 function form_Register_function(){

    require_once(dirname( __FILE__ ).'/../../../wp-load.php');
   $data = $_POST['data'];
   global $wpdb;

   if( !check_ajax_referer('our-nonce', 'security' ) ){

    wp_send_json_error('security failed');

    return;

  }
  //var_dump($data);
  $Reg_FName=$data['Reg_FName'];
  $Reg_MName=$data['Reg_MName'];
  $Reg_LName=$data['Reg_LName'];
  $Reg_Password=$data['Reg_Password'];
  $Reg_CPassword=$data['Reg_CPassword'];
  $Reg_Email=$data['Reg_Email'];
  $Reg_Contact=$data['Reg_Contact'];
  $Reg_Address1=$data['Reg_Address1'];
  $Reg_Address2=$data['Reg_Address2'];
  $Reg_Address3=$data['Reg_Address3'];
  $Reg_Pin=$data['Reg_Pin'];
  $Reg_City=$data['Reg_City'];
  $Reg_State=$data['Reg_State'];
  $Reg_Country=$data['Reg_Country'];


  $table_name = "Pooja_Registration";
  $wpdb->insert($table_name, array ('Reg_FName' => $Reg_FName, 'Reg_MName' => $Reg_MName,'Reg_LName' => $Reg_LName,'Reg_Password' => $Reg_Password,'Reg_CPassword' => $Reg_CPassword,'Reg_Email' => $Reg_Email,'Reg_Contact' => $Reg_Contact,'Reg_Address1' => $Reg_Address1,'Reg_Address2' => $Reg_Address2,'Reg_Address3' => $Reg_Address3,'Reg_Pin' => $Reg_Pin,'Reg_City' => $Reg_City,'Reg_State' => $Reg_State,'Reg_Country' => $Reg_Country) ); 

 $wpdb->show_errors();
  $wpdb->print_error();
echo 'From Submitted Successfully';

 die();
   }


add_action('wp_ajax_nopriv_form_Register_function','form_Register_function');
add_action('wp_ajax_form_Register_function','form_Register_function');

But the code doesnt work, When i click submit button neither its entering into database nor i am getting any error. Any help appreciated.

Answer 1

page-register.php

<form class="RegForm" method="post" action="" >
    <br>
    <h2 style ="">Registration Form </h2>
    <div class ="col-md-3" style="clear:both;">
        <label style="font-size:12px;"> First Name:</label>
        <input type="text" id="RF_FName" name="RF_FName" />
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">Middle Name:</label>
        <input type="text" id="RF_MName" name="RF_MName" /> 
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">Last Name:</label>
        <input type="text" id="RF_LName" name="RF_LName" />
        </div>
        <br><br>
        <div class ="col-md-3" style="clear:both;">
        <label style="font-size:12px;"> Password:</label>
        <input type="Password" id="RF_Pass" name="RF_Pass" />

        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">Confirm Password:</label>
        <input type="Password" id="RF_CPass" name="RF_CPass" /> 
        </div>

        <br><br>
        <div class ="col-md-3" style="clear:both;">
        <label style="font-size:12px;">Email ID:</label>
        <input type="text" id="RF_Email" name="RF_Email" />
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">Contact No:</label>
        <input type="text" id="RF_Contact" name="RF_Contact" />
        </div>
        <br><br>
        <div class ="col-md-3" style="clear:both;">
        <label style="font-size:12px;">Address 1:</label>
        <input type="text" id="RF_Address1" name="RF_Address1" />
        </div>
        <div class ="col-md-3" >
        <label style="font-size:12px;">Address 2:</label>
        <input type="text" id="RF_Address2" name="RF_Address2" />
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">Address 3:</label>
        <input type="text" id="RF_Address3" name="RF_Address3" />
        </div>

        <br><br>

        <div class ="col-md-3" style="clear:both;">
        <label style="font-size:12px;">Pin Code:</label>
        <input type="text" id="RF_Pin" name="RF_Pin" />
        </div>
        <div class ="col-md-3" >
        <label style="font-size:12px;">City:</label><br>
        <input type="text" id="RF_City" name="RF_City" />
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">State:</label><br>
        <input type="text" id="RF_State" name="RF_State" />
        </div>
        <div class ="col-md-3">
        <label style="font-size:12px;">County:</label><br>
        <input type="text" id="RF_Country" name="RF_Country" />
        </div>
        <br><br>
        <div class ="col-md-3"style="clear:both;" ></div>

        <br> <br>
        <div class ="col-md-3" style="clear:both;" >
        <input  id="RegisterUser" type="submit" Value="Register" name="submit" />
        </div>

    </form>

RegisterUser.js

jQuery(document).ready(function($){

var RegisterUser = document.getElementById('RegisterUser');

var ajaxFunctionformprocess = function(fromdata, action){
    $.ajax({
        type:'post',
        url: Registerform.url,
        data:{
            action:action,
            data:fromdata,
            security:Registerform.security,

        },
        success:function(reponse){
            $('div.msg').html(reponse);
        },
        error:function(response){
            alert(response);
        }

    });
}

    RegisterUser.addEventListener('click', function(event){
        event.preventDefault();
        var fromdata = {
            'Reg_FName':jQuery('#RF_FName').val(),
            'Reg_MName':jQuery('#RF_MName').val(),
            'Reg_LName':jQuery('#RF_LName').val(),
            'Reg_Password':jQuery('#RF_Pass').val(),
            'Reg_CPassword':jQuery('#RF_CPass').val(),
            'Reg_Email':jQuery('#RF_Email').val(),
            'Reg_Contact':jQuery('#RF_Contact').val(),
            'Reg_Address1':jQuery('#RF_Address1').val(),
            'Reg_Address2':jQuery('#RF_Address2').val(),
            'Reg_Address3':jQuery('#RF_Address3').val(),
            'Reg_Pin':jQuery('#RF_Pin').val(),
            'Reg_City':jQuery('#RF_City').val(),
            'Reg_State':jQuery('#RF_State').val(),
            'Reg_Country':jQuery('#RF_Country').val(),
        };
        ajaxFunctionformprocess(fromdata, 'form_Register_function');    

    });

 });            

functions.php

function RegisterForm_style_andscripts(){
//wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_script('ajax-function',  get_stylesheet_directory_uri() . '/js/RegisterUser.js', array('jquery'), '1.0', false );
wp_localize_script( 'ajax-function', 'Registerform', array(
    'url'=> admin_url('admin-ajax.php'),
    'security'=> wp_create_nonce('our-nonce')
  ) );
 }

 add_action('wp_enqueue_scripts','RegisterForm_style_andscripts');


 function form_Register_function(){

    require_once(dirname( __FILE__ ).'/../../../wp-load.php');
   $data = $_POST['data'];

   global $wpdb;

   if( !check_ajax_referer('our-nonce', 'security' ) ){

    wp_send_json_error('security failed');

    return;

  }
  //var_dump($data);
  $Reg_FName=$data['Reg_FName'];
  $Reg_MName=$data['Reg_MName'];
  $Reg_LName=$data['Reg_LName'];
  $Reg_Password=$data['Reg_Password'];
  $Reg_CPassword=$data['Reg_CPassword'];
  $Reg_Email=$data['Reg_Email'];
  $Reg_Contact=$data['Reg_Contact'];
  $Reg_Address1=$data['Reg_Address1'];
  $Reg_Address2=$data['Reg_Address2'];
  $Reg_Address3=$data['Reg_Address3'];
  $Reg_Pin=$data['Reg_Pin'];
  $Reg_City=$data['Reg_City'];
  $Reg_State=$data['Reg_State'];
  $Reg_Country=$data['Reg_Country'];


  $table_name = "Pooja_Registration";
  $result = $wpdb->insert($table_name, array ('Reg_FName' => $Reg_FName, 'Reg_MName' => $Reg_MName,'Reg_LName' => $Reg_LName,'Reg_Password' => $Reg_Password,'Reg_CPassword' => $Reg_CPassword,'Reg_Email' => $Reg_Email,'Reg_Contact' => $Reg_Contact,'Reg_Address1' => $Reg_Address1,'Reg_Address2' => $Reg_Address2,'Reg_Address3' => $Reg_Address3,'Reg_Pin' => $Reg_Pin,'Reg_City' => $Reg_City,'Reg_State' => $Reg_State,'Reg_Country' => $Reg_Country) ); 

// $wpdb->show_errors();
//  $wpdb->print_error();
  if( $result ){
    echo 'From Submitted Successfully';
  }

 die();
   }


add_action('wp_ajax_nopriv_form_Register_function','form_Register_function');
add_action('wp_ajax_form_Register_function','form_Register_function');

Would you please try above code? I think it's helpful for you.