php - jquery - ajax help on wordpress - what's wrong with my code?

Hey all! I'm new to this site and I think I can get help with the code I'm trying to write. I am new to wordpress, php and ajax and writing this simple addon that adds two numbers and shows the result below. I know it's useless; but it will help me learn


// PREPARATIONS - Enqueue All Javascript
function ajax_enqueue_scripts($hook) {
    wp_enqueue_script('adder', plugins_url('/js/adder.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'ajax_enqueue_scripts');
// STEP I : Create admin menu
function adder_admin_menu() {
    add_menu_page('ADDER', 'ADDER', 'manage_options', 'adder', 'display_adder_form', 'dashicons-plus', 81);
}
add_action('admin_menu', 'adder_admin_menu');

// STEP II : Display adder form on the menu page created above
function display_adder_form() {
    //END PHP TAG TO WRITE SOME HTML?>
        <!-- HTML FORM TO DISPLAY ADDER BEGINS -->
        <div class="wrap">
            <h1>The Ultimate Adder</h1>
            <form id="adder_form" class="adder_form" name="adder_form" method="POST" action="/wp-admin/admin-ajax.php?action=ultimate_adder">
                <input type="text" name="number1" id="number1" placeholder="#1" />
                <input type="text" name="number2" id="number2" placeholder="#2" />
                <input type="submit" class="button-primary" value="Calculate & Save To DB" >
            </form>
        </div>

        <div class="answer">
            <!--inner html is replaced by ajax -->
        </div>
    <?php //PHP TAG REOPENED
}

function ultimate_adder() {
    $number1 = $_POST["number1"];
    $number2 = $_POST["number2"];
    $result = $number1 + $number2;
    $result = (array)$result;
    return json_encode($result);
}


?>

And the corresponding JavaScript (adder.js) -

jQuery(document).ready(function($){
    var wpajaxurl = '/wp-admin/admin-ajax.php?action=ultimate_adder';
    $('form.adder_form').bind('submit', function(){
            $form = $(this);
            var form_data = $form.serialize();
            $.ajax({
                'method' : 'post',
                'url' : wpajaxurl,
                'data' : form_data,
                'dataType' : 'json',
                'cache' : false,
                'success' : function (data, textStatus) {
                    $(".answer").html("Answer:" + data["result"]);
                },
                'error' : function (jqXHR, textStatus, errorThrown) {
                    alert("FAIL");
            }
            });
        return false;
        });

});

My code works to a point that I get 'undefined' as my response below my form. Can someone point out what part of it is going bong? Thanks in advance for your time.

php - jquery - ajax help on wordpress - what's wrong with my code?

Replies

Welcome, guest