Utilizing a customized plugin to seize enter knowledge through Ajax and PHP

I am very new to WordPress, so please excuse my potential lack of knowledge. I am tremendous comfy with good outdated vanilla HTML/JS/CSS, and transitioning my onerous coded web site into WP. My outdated web site had a variety of varieties that I used Ajax to ship enter values over to a PHP script and output a response.

After studying by means of this web site: https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/ I started to grasp the fundamentals of how WP likes Ajax requests to be dealt with. Nevertheless, the one factor this text omitted was how you can seize consumer enter knowledge.

So here is my finest rationalization of what I’ve tried:

Entrance Finish Going through WP Web page Code

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

Then I created a brand new plugin by going to my cPanel file supervisor and going to wp-content -> plugins then creating a brand new folder known as myFormProcessor inside this folder I added the next two recordsdata:

File #1 myFormProcessor.php

<?php
/*
Plugin Identify: myFormProcessor
*/

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

perform my_price_request(){

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

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

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

die();
}

perform 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 understand the above file would not actually do something. To debug this challenge I am simply passing again the worth I am attempting to seize from the consumer.

File #2 my_form_ajax_script.js

jQuery(doc).prepared( perform() {

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

  jQuery.ajax({
     kind : "post",
     dataType : "json",
     url : myAjax.ajaxurl,
     knowledge : {motion: "my_price_request", knowledge : knowledge, nonce: nonce},
     success: perform(response) {
        if(response.kind == "success") {
           alert(response.knowledge);
        }else{
           alert("error occured");
        }
     },
     error: perform (xhr, ajaxOptions, thrownError) {
        console.log(xhr.standing);
        console.log(thrownError);
        alert('main error');
     }
  })   
 })
})

I activated the myFormProcessor plugin inside WP and examined the web page. Excellent news is most the whole lot labored, no main errors. The one factor that did not work was acquiring the worth from the enter (id=’data-to-submit’). It is solely utilizing the info included within the hyperlink produced within the frontend PHP. Can anybody inform me how you can appropriate this?