0

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;
    });
});
Improve this question
7
  • 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
    Commented Mar 5, 2014 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?
    – user28566
    Commented Mar 5, 2014 at 18:46
  • Honestly, it could be either. Try accessing/testing the site from another computer to narrow that down.
    – s_ha_dum
    Commented Mar 5, 2014 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.
    – user28566
    Commented Mar 5, 2014 at 18:49
  • 1
    That was about your AJAX question.
    – s_ha_dum
    Commented Mar 5, 2014 at 18:51

2 Answers 2

Reset to default
1

That error was identified by stackoverflow - it's actually caused by Rapport software, a security tool some banks recommend. You could turn it off / remove it from development machines.

Improve this answer
0

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.

Improve this answer
1
  • 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
    Commented Mar 5, 2014 at 21:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.