0

I am trying to build a wordpress plugin to provide a filter form, it fetches the data from the database using Ajax from the input sent by users. I am trying to submit the form via Ajax.

Plugin File Structure

I doubt whether placing of an AJAX call function, form_ajax_process_request() under ajax-process-form.js is right or not?

Here is the ajax-process-form.js code

jQuery(document).ready( function($) {
jQuery('HCS-quicksearchForm').bind('submit', function() {

var data = {
    action: 'form_response',
    post_var: 'this will be echoed back'
};
console.log(the_ajax_script.ajaxurl);
$.post(the_ajax_script.ajaxurl, data, function(response) {
    alert(response);
});
return false;
});
});

<?php 
    function form_ajax_process_request() {
        if( isset( $_POST["post_var"] ) ) {
            $response = $_POST["post_var"];
            echo $response;
            die();
        }
    }

    add_action('wp_ajax_form_response','form_ajax_process_request');
    add_action('wp_ajax_nopriv_form_response','form_ajax_process_request');
?>

Form UI schoolform_view.php code

<?php
    echo '<fieldset>';
    echo'<div id="HCS-quicksearch" class="HCS-quicksearchWrapper">';
    echo'<form id="HCS-quicksearchForm" class="hcs-school-form" action="" method="POST">';      
    echo '<div id="HCS-qsCityWrap" class="HCS-qsFieldWrap">';
    global $wpdb;
    $city_results = $wpdb->get_results ("SELECT * from wp_gj73yj2g8h_hillsborough_county_cities;"        );
    echo '<select id="city_id HCS-qsCity" name="city_name" class="HCS-qsInput HCS-qsSelectInput">';
    echo '<option value="">Choose a City</option>';
    foreach ( $city_results as $result ) {
    echo '<option>'.$result->city_name.'</option>';
    }
    echo '</select>';
    echo '</div>';
    echo '<input id="HCS-qsSubmit" class="HCS-qsInput HCS-qsButtonInput" type="submit" name="form-submitted" value="Search">';      
    echo '</form>';
    echo '</div>';
    echo '</fieldset>';
?>

plugin core school_core.php code

    <?
 /*
Plugin Name: Hillsborough County Homes By School Properties
Plugin URI: http://accessrealtytampa.com
Description: Search For Homes By School Name, Ranking and other Features
Version:0.1.0
Author: Himani Lotia

*/
define( 'HCS_URL', plugin_dir_url( __FILE__ )   );
define( 'HCS_PATH', plugin_dir_path( __FILE__ ) );
define( 'HCS_VERSION', '0.1.0'                  );

add_action('init', 'register_script');
function register_script() {
    wp_register_style( 'hcs-style', HCS_URL . '/assets/css/hcsstyle.css', FALSE, HCS_VERSION, 'all' );
}

add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style() {
    wp_enqueue_style('hcs-style');
}

function ajax_load_scripts() {
    wp_enqueue_script("ajax-process-form", HCS_URL. 'ajax-process-form.js', array( 'jquery' ) );
    wp_localize_script ( 'ajax-process-form', 'the_ajax_script', array('ajaxurl' => admin_url(admin-ajax.php ) ) );
}

add_action('wp_print_scripts', 'ajax_load_scripts');

function schoolform() {

    enqueue_style();
     $saved_data =  get_option('save_plugin_settings');
     $saved_data = $saved_data ? unserialize($saved_data) : null ;

     include_once(HCS_PATH . '/schoolform_view.php');
}


function hcs_shortcode() {
    ob_start();
    schoolform();
    return ob_get_clean();
}

add_shortcode('hcs_school_filter','hcs_shortcode');
?>

In my google chrome console, ajax-process-form.js is present under but in console log it is displaying a Syntax Error.

0

Syntax error comes from your js file that is containing php code. You don't need this part to be in the js file and need to be in a php file.

<?php 
function form_ajax_process_request() {
    if( isset( $_POST["post_var"] ) ) {
        $response = $_POST["post_var"];
        echo $response;
        die();
    }
}

add_action('wp_ajax_form_response','form_ajax_process_request');
add_action('wp_ajax_nopriv_form_response','form_ajax_process_request');
?>

This part need to be in school_core.php (without <?php and ?>).

  • Yet, not able to make this work. – Himani Dec 13 '16 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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