WordPress save data to DB via AJAX

Question

I'm quite new to WordpPress and web development as in general. Trying to save data to wordpress DB from the form I have on the page via ajax call.

This is the form I have:

             <form type="post" action="" id="MSRPForm">
                    <div class="py-3 my-0 form-group row border-top border-bottom align-items-center">
                        <label for="inputEmail" class="col-sm-4 col-form-label" >Email</label>
                        <div class="col-sm-8">
                            <input name="Email" type="text" class="form-control-plaintext" id="inputEmail"
                            placeholder="email@example.com">
                        </div>
                    </div>
                    <div class="py-3 my-0 form-group row border-top border-bottom align-items-center">
                        <label for="inputZipCode" class="col-sm-4 col-form-label" >Zip Code</label>
                        <div class="col-sm-8">
                            <input name="ZipCode" type="text" class="form-control" id="inputZipCode" placeholder="Enter your Zip Code">
                        </div>
                    </div>

                    <div class="py-3 my-0 form-group row border-top border-bottom align-items-center">
                        <label for="inputMSRP" class="col-sm-6 col-form-label font-weight-bold" >MSRP<br><small>Manufacturer's Suggested Retail Price</small></label>
                        
                        <div class="col-sm-6">
                        <input name="MSRP" type="text" min="1000" class="form-control text-right" id="inputMSRP" placeholder="Enter the MSRP">
                        </div>
                    </div>
                    <button id="msrp-btn" type="button" class="btn btn-primary my-2">Calculate</button>
                </form>

This is an AJAX. It is wrapped into jQuery function, so it works for sure:

 let ajaxurl = "wp-admin/admin-ajax.php";
$(document).ready(function(){
    $("#msrp-btn").click(function(e) {
        e.preventDefault();       
        let email = $('#inputEmail').val();
        let zipCode = $('#inputZipCode').val();
        let msrp = $('#inputMSRP').val();

        let info = {
            'action': 'addMSRP',
            'email': email,
            'zipCode' : zipCode,
            'msrp' : msrp
        };
            
        
        jQuery.ajax({
            type: "POST",
            url: ajaxurl, 
            data: info,
            beforeSend: function() {            
                $('#myModal').modal('show'); 
                // console.log( info);
            },
            success: function(res){
                console.log(res);
            },
            error: function(res){
                console.log(res)
            },
        }); 

    });  
});

Finally this is a code I have in my functions.php

    add_action('wp_ajax_addMSRP', 'addMSRP');
add_action('wp_ajax_nopriv_addMSRP', 'addMSRP');

function addMSRP() {

    global $wpdb;

    $email = $_POST['Email'];
    $zipCode = $_POST['ZipCode'];
    $MSRP = $_POST['MSRP'];
    
    
    if ( $wpdb->insert( 'msrp_info', array(
        'email' => $email,
        'zipCode' => $zipCode,
        'MSRP' => $MSRP
    ) ) === false ) {
        wp_die('Database Insertion failed'); 
    } else {
        echo "Info successfully added, row ID is ".$wpdb->insert_id;
    }
    exit();
}

Looks like code is working as data get passed to the server, but it is not getting saved to the DB. Would appreciate if somebody can tell what I'm doing wrong. Thank you.

Answer 1

There are a few issues I can see, namely, you are not passing in the correct variable to the $_POST. You also need to specify the name of the database table. Try the following code for database inserting.

add_action('wp_ajax_addMSRP', 'addMSRP');
add_action('wp_ajax_nopriv_addMSRP', 'addMSRP');  

function addMSRP(){
    
        global $wpdb;
        //output will be your debug tool - if it posts it works.
        $output = ['status' => 1];
        $email = sanitize_text_field($_POST["email"]);
        $zipcode = sanitize_text_field($_POST["zipCode"]);
        $MSRP = sanitize_text_field($_POST["msrp"]);
    
        $table = $wpdb->prefix . 'enteryourdatabasename';
        //This below code has to match exactly what the database reads.
        //If 'msrp' in the database the table is 'MsRp' - than replace it as spelled below. 
        $data = array(
            'email' => $email,
            'zipcode' => $zipcode,
            'msrp' => $MSRP,
            
        );
    
        $wpdb->insert($table, $data);
    //using wp_send_json to send that response and kill script.
        $output['status'] = 2;
        wp_send_json($output);
    
    
    
    }