Styjun

I am currently building a plugin for wordpress that is supposed to allow the user to create a new post from the front end of their site. When I click the Create Post button nothing happens. Please take a look at my code below:

the plugin uses a JavaScript function with pHp to make a POST request to the API. Iam working on a local server(MAMP) and do not currently use pretty permalinks so my url looks like this... http://localhost:9000/wordpress/?rest_route=/wp/v2/posts
which i have visited and seen the JSON data. I just can seem to get the button to make the actual post request.

php / html

// Make sure we don't expose any info if called directly
if ( !function_exists( 'add_action' ) ) 
 echo 'Hi there! I'm just a plugin, not much I can do when called directly.';
 exit;



function postayge_front()

 /* content variable */
 $content = '';

 $content .= '<div class="admin-quick-add">';

 $content .= '<h3>Quick Add Post</h3>';

 $content .= '<input type="text" name="title" placeholder="Title">';
 $content .= '<textarea name="content" placeholder="Content"></textarea>';
 $content .= '<button id="quick-add-button">Create Post</button>';

 $content .= '</div>';

 return $content;


add_shortcode('postayge','postayge_front');



/* Add scripts & styles */
function wp_postayge_adding_styles() 
 wp_register_style('postayge_style', plugins_url('main.css', __FILE__));
 wp_enqueue_style('postayge_style');

 wp_register_script('postayge_script', plugins_url('script.js', __FILE__));
 wp_enqueue_script('postayge_script');

 wp_localize_script('script.js', 'securityData', array(
 'nonce' => wp_create_nonce('wp_rest')
 ));

 

 add_action( 'wp_enqueue_scripts', 'wp_postayge_adding_styles' ); 


?>

js

//Quick add post AJAX

var quickAddButton = document.querySelector("#quick-add-button");

if (quickAddButton) 
 quickAddButton.addEventListener("click", function() 
 var postaygePostData = 
 "title": document.querySelector('.admin-quick-add[name="title"]').value,
 "content": document.querySelector('.admin-quick-add[name="content"]').value,
 "status": "publish"
 

 var createPost = new XMLHttpRequest();
 createPost.open("POST", "http://localhost:9000/wordpress/?rest_route=/wp/v2/posts");
 createPost.setRequestHeader("X-WP-Nonce", securityData.nonce);
 createPost.setRequestHeader("Content-Type", "applicaton/json;charset=UTF-8")
 createPost.send(JSON.stringify(postaygePostData));
 );

css

/** Quick Add Styles */
.admin-quick-add 
background-color: inherit;
padding:15px;
margin-bottom: 15px;


.admin-quick-add input,
.admin-quick-add textarea 
width: 100%;
border: none;
padding: 10px;
margin: 0 0 10px 0;
box-sizing: border-box;