I'm new to the Wordpress/PHP world. I want my page be able to communicate with an API that I build myself. So for this I have a form on my Wordpress Page using a HTML code widget which looks like this:
<html>
<body>
<div>
<form id="myform" action="submit_shortcode">
<input type="text" id="input" placeholder="Input" required>
<input type="submit" value="Enter">
</form>
</div>
</body>
</html>
And I have added this code to functions.php of the current theme:
function get_shortcode($sc) {
$response = wp_remote_get('http://localhost:9000/shortcode/'.$sc);
if (is_array($response)) {
$body = $response['body'];
$data = json_decode($body);
echo $data;
if (! is_wp_error($data)) {
echo "error";
}
}
return;
}
add_action('submit_shortcode', 'get_shortcode');
But I can't see how to integrate the function with the form. When I submit my form, it sends me to mypage/submit_shortcode. How can I trigger the function get_shortcode when submitting the form?
PS: This "shortcode" has nothing to do with the Shortcode widget of Elementor
I'm new to the Wordpress/PHP world. I want my page be able to communicate with an API that I build myself. So for this I have a form on my Wordpress Page using a HTML code widget which looks like this:
<html>
<body>
<div>
<form id="myform" action="submit_shortcode">
<input type="text" id="input" placeholder="Input" required>
<input type="submit" value="Enter">
</form>
</div>
</body>
</html>
And I have added this code to functions.php of the current theme:
function get_shortcode($sc) {
$response = wp_remote_get('http://localhost:9000/shortcode/'.$sc);
if (is_array($response)) {
$body = $response['body'];
$data = json_decode($body);
echo $data;
if (! is_wp_error($data)) {
echo "error";
}
}
return;
}
add_action('submit_shortcode', 'get_shortcode');
But I can't see how to integrate the function with the form. When I submit my form, it sends me to mypage/submit_shortcode. How can I trigger the function get_shortcode when submitting the form?
PS: This "shortcode" has nothing to do with the Shortcode widget of Elementor
It sounds like you want an AJAX request of some sort.
In your functions.php file, enqueue some JavaScript to handle the form.
wp_register_script( 'my-scripts', get_stylesheet_directory_uri() . '/[path to your scripts]/myscripts.js', array( 'jquery' ), '1.0', true );
See this link for reference.
Right under that, add a JavaScript variable for your AJAX URL.
wp_localize_script( 'my-scripts', 'data', array( 'ajax_url' => admin_url( 'admin-ajax.php' );
Reference on wp_localize_script and admin_url.
After the script is registered, add it to the queue so it can be loaded.
wp_enqueue_script( 'my-scripts' );
Under that, add in your code for getting the response from your API.
// your function, set up for AJAX
function get_api_response() {
$response = wp_remote_get('http://localhost:9000/shortcode/'.$sc);
if (is_array($response)) {
$body = $response['body'];
$data = json_decode($body);
echo $data;
if (! is_wp_error($data)) {
echo "error";
}
}
wp_die(); // make sure you do this
}
add_action( 'wp_ajax_get_api_response', 'get_api_response' );
add_action( 'wp_ajax_nopriv_get_api_response', 'get_api_response' );
Reference here.
And finally, in your JavaScript file (myscripts.js in this example), handle the form submission.
jQuery(document).ready(function($) {
$('#myform').on('submit', function(e) {
e.preventDefault(); // stop the form from submitting
$.post(
data['ajax_url'], // passed in from wp_localize_script
{
'input' : $('#input').val()
},
function( response ) {
// do what you want to do here
// the response will be what's echoed by the
// get_api_response function
}
);
});
});
If you don't want to use AJAX, the "shortcode" you're using will need to be made into a real shortcode and used on the page you're posting your form to. Info on that here.
Your shortcode would then need to grab the $_POST values from your form and do something with them. In either case, make sure you sanitize all values coming from the outside world.
Hope this helps.
Cheers!
If you're comfortable with JavaScript, one way to approach what I think you're trying to do here would be to enqueue a JavaScript version of your function and then just call it from the form as an onSubmit attribute. So along the lines of:
and you've enqueued myFunction either in function.php or in a plugin:
function load_my_script() {
wp_enqueue_script( 'myFunction', get_template_directory_uri() . '/js/myFunction.js');
}
add_action( 'wp_enqueue_scripts', 'load_my_script' );