Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

When the user clicks the 'submit' button on my form, I would like 'this will be echoed back' to be displayed within an alert.

The only JS console error I get:

Failed to load resource http://nikkomsgchannel/e?0017005e002b00560036004400190026002d0025002c005300…240020003700620024005b004a005500790053002c0045002b003600300026002f005d004c

The only code I've changed is the Jquery, before this I was using a hyperlink & clickevent in Jquery, which was working.

My code:

PHP file

function add_my_css_and_my_js_files(){
    wp_enqueue_script( "ajax-test", plugin_dir_url( __FILE__ ) . '/ajax-test.js', array( 'jquery' ) );
    wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );  
}
add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files"); 

function text_ajax_process_request() {
            if ( isset( $_POST["post_var"] ) ) {
        $response = $_POST["post_var"];
        echo $response;
        die();
    }
}
add_action('wp_ajax_test_response', 'text_ajax_process_request');

function include_jQuery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

add_action( 'init', 'register_shortcodes' );
function register_shortcodes() {
    add_shortcode( 'displaycalcs', 'mp_calcs_display' );
}
    function mp_calcs_display() {

            $output = <<<HTML
            <form action="" method="post" name="formsubmit" id="formsubmit"   >
    Number of welds: <input type="number" name="numberofwelds" id="numberofwelds"  >
 Number of construction welds: <input type="number" name="numberofconwelds" id="numberofconwelds"  >
   Total one: <input type="text" name="totalone" id="totalone" disabled>
<div id="totalfail1"></div>
   Total two: <input type="text" name="totaltwo" id="totaltwo" disabled>
<div id="totalfail2"></div>
   Total three: <input type="text" name="totalthree" id="totalthree" disabled>
<div id="totalfail3"></div>
   <input type="submit"  value="Calculate" id="submit" name="submit" >
<div id="result"> </div>
</form> 
 HTML;
return $output;
} 

ajax-test.js

jQuery(document).ready( function($) {
    $("#submit").submit( function() {
        var data = {
            action: 'test_response',

                        post_var: 'this will be echoed back'
        };
                $.post(the_ajax_script.ajaxurl, data, function(response) {
            alert(response);
        });
        return false;
    });
});
share|improve this question
1  
Is that your domain? And the address is definitely not that set by wp_localize_script. Not to be paranoid, but I can't help but think you have a malware problem. –  s_ha_dum Mar 5 at 18:33
    
No, I don't recognise that address at all. Sorry to be naive, but a malware problem on my hosting or computer? –  mattnewbie Mar 5 at 18:46
    
Honestly, it could be either. Try accessing/testing the site from another computer to narrow that down. –  s_ha_dum Mar 5 at 18:47
    
OK thanks, I'll look into it . Have you got any ideas about my ajax Q please? I've only changed the jquery, & it worked previously. –  mattnewbie Mar 5 at 18:49
1  
That was about your AJAX question. –  s_ha_dum Mar 5 at 18:51
show 1 more comment

1 Answer 1

up vote 1 down vote accepted

There are lots of problems:

Don't echo things in the AJAX callback. JavaScript should handle that.

To send data in your callback, use wp_send_json() or the higher level functions wp_send_json_success() and wp_send_json_error(). All of them will die for you. No need to exit or die afterwards.

Data Validation and Sanitization is something you should take serious: $response = $_POST["post_var"]; is extremely unsafe way to do things. If you already got hacked, then this would have been an open door. Use filter_var() or filter_var_array(), both native PHP functions, or esc_attr() and similar WordPress escaping functions.

AJAX and shortcodes are a very specific thing. Per default AJAX requests go through the admin interface (hence admin-ajax.php as handling route). And shortcodes aren't needed in the admin UI. They get rendered during runtime when the content of a post gets rendered when looping. See search results.

share|improve this answer
1  
@mattnewbie I edited the gist to be a plugin. The only thing needed would be something like add_action( 'loop_start', array( $this, 'renderForm' ) ); and some actual form inside renderForm() to pass data around. Should be enough to help you start playing around. –  kaiser Mar 5 at 21:26
    
Thank-you. That looks useful –  mattnewbie Mar 5 at 21:30
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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