I’m very new to WordPress, so please excuse my possible lack of understanding. I’m super comfortable with good old vanilla HTML/JS/CSS, and transitioning my hard coded site into WP. My old site had a lot of forms that I used Ajax to send input values over to a PHP script and output a response.

After reading through this site: https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/ I began to understand the basics of how WP likes Ajax requests to be handled. However, the only thing this article left out was how to grab user input data.

So here’s my best explanation of what I’ve tried:

Front End Facing WP Page Code

<input type="text" id="data-to-submit"/>
<?php
  /////////////////////////////////////////////////////////////////////////
  ////PHP code was added to this WP page using PHP-Everwhere plugin //////
  ///////////////////////////////////////////////////////////////////////
  $nonce = wp_create_nonce("my_nonce");
  $link = admin_url('admin-ajax.php?action=my_price_request&nonce='.$nonce);
  echo '<a id="go" data-nonce="'.$nonce.'" href="' . $link . '">Submit</a>';
?>

Then I created a new plugin by going to my cPanel file manager and going to wp-content -> plugins then creating a new folder called myFormProcessor inside this folder I added the following two files:

File #1 myFormProcessor.php

<?php
/*
Plugin Name: myFormProcessor
*/

add_action("init", "my_script_enqueuer");
add_action("wp_ajax_my_price_request", "my_price_request");

function my_price_request(){

  if(!wp_verify_nonce( $_REQUEST['nonce'], "my_nonce")) {
   exit();
}

$result['type'] = 'success';
$result['data'] = $_REQUEST['data'];

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
   $result = json_encode($result);
   echo $result;
}else{
  header("Location: ".$_SERVER["HTTP_REFERER"]);
}

die();
}

function my_script_enqueuer() {
   wp_register_script( "my_form_script", WP_PLUGIN_URL.'/myFormProcessor/my_form_ajax_script.js', array('jquery') );
   wp_localize_script( 'my_form_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script('jquery');
   wp_enqueue_script('my_form_script');
}
?>

I realize the above file doesn’t really do anything. To debug this issue I’m just passing back the value I’m trying to grab from the user.

File #2 my_form_ajax_script.js

jQuery(document).ready( function() {

 jQuery("#go").click( function(e) {
  e.preventDefault(); 
  nonce = jQuery(this).attr("data-nonce");
  data = jQuery('#data-to-submit').val();  // <--- THIS IS THE VALUE I WANT TO PASS TO PHP

  jQuery.ajax({
     type : "post",
     dataType : "json",
     url : myAjax.ajaxurl,
     data : {action: "my_price_request", data : data, nonce: nonce},
     success: function(response) {
        if(response.type == "success") {
           alert(response.data);
        }else{
           alert("error occured");
        }
     },
     error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr.status);
        console.log(thrownError);
        alert('major error');
     }
  })   
 })
})

I activated the myFormProcessor plugin within WP and tested the page. Good news is most everything worked, no major errors. The only thing that didn’t work was obtaining the value from the input (id=’data-to-submit’). It’s only using the data included in the link produced in the frontend PHP. Can anyone tell me how to correct this?

$299 Affordable Web Design WordPress