0

I have created a small custom plugin which is just an HTML form. The HTML form is echo'd out using PHP and it includes a small JavaScript function that I want to run on submission. I cannot get it to work, however, and I am not sure what I am doing wrong. Is it not allowed to use JavaScript in this way? If not, what is the proper way to do it?

Running the below snippet does nothing when hitting the submit button.

echo "
    <script type=\"text/javascript\">
    function validateForm()
    {
        alert(\"FOOO\");
        return false;
    }
    </script>
    <h1>Header</h1><br>
    <form method=\"post\" onsubmit=\"validateForm()\">
    <input type=\"submit\" value=\"Submit me\" /><br>
    </form>
";

Update:

Here is the entire plugin, stripped down to just a small test. The JavaScript console shows nothing except a jQuery warning: JQMIGRATE: jQuery.fn.live() is deprecated. I am not sure where this originates from, but I do not use jQuery directly.

When I activate the plugin and click the button, the page is reloaded with the button and all, but the message Yes, it was posted! is not displayed. Thus it seems that no POST request is made. Removing the script and the onsubmit from the PHP echo produces the same behavior.

<?php
/*
Plugin Name: Test Plugin
*/

// Create plugin menu.
add_action('admin_menu', 'create_test_plugin_menu');

function create_test_plugin_menu()
{
    add_menu_page('The Test Plugin', 'Test Plugin', 'administrator', __FILE__, 'setup_test_plugin');
}

function setup_test_plugin()
{
    $submit_name = 'test_button';

    if ( $_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST[$submit_name]) )
    {
        echo "Yes, it was posted!";
    }
    else
    {
        echo "
            <script type=\"text/javascript\">
            function validateForm()
            {
                alert(\"FOOO\");
                return false;
            }
            </script>
            <h1>Header</h1><br>
            <form method=\"post\" onsubmit=\"validateForm()\">
            <input type=\"submit\" name=\"{$submit_name}\" value=\"Submit me\" /><br>
            </form>
        ";
    }

}

?>

Here is what is printed to the HTML source, copied from the JavaScript console.

<script type="text/javascript">
function validateForm()
{
    alert("FOOO");
    return false;
}
</script>
<h1>Header</h1><br>
<form method="post" onsubmit="validateForm()">
<input type="submit" name="test_button" value="Submit me" /><br>
</form>
  • 1
    There is nothing wrong in your code; I've tested it and it is working alerting with "FOO" on submit the form. I think your problem is not related with WordPress. Can you show us a little more context of how are you using that code? Any debug information in the JavaScript console? – cybmeta Sep 15 '15 at 8:47
  • I updated the post with a stripped down plugin example that does not work for me. The JavaScript console shows no errors but the jQuery one mentioned in the update. – Krøllebølle Sep 15 '15 at 16:11
  • where is test_button? – Milo Sep 15 '15 at 16:13
  • Yes, sorry, that should be the name of the submit button. This makes the Yes, it was posted! message appear as expected, but the JavaScript alert is still not shown. – Krøllebølle Sep 15 '15 at 16:15
  • I have now run the above test plugin in different browsers (Chrome and Firefox) and on both a local server and a live server, and the behavior is still the same. – Krøllebølle Sep 15 '15 at 17:55
1

Two issues -

validateForm is an existing javascript function in WordPress core, change it to something else. Always prefix things with a unique string to prevent these problems.

Your onsubmit needs return added: onsubmit="return your_function()"

  • I had onsubmit="return my_function()" in there from before, don't know where it went. You are most certainly right about the validateForm() messing things up. Adding the return and naming the function validate_form() instead of validateForm() clears things up. Good catch! I am not sure how I could be able to figure this out - is there some way to let Wordpress tell you if you try to override some of its internal functionality? – Krøllebølle Sep 15 '15 at 18:41
  • I found it by doing a search on the code. When I'm debugging problems usually the first thing I'll do is search the code to see how things are working internally, so it has become a natural reflex. – Milo Sep 15 '15 at 19:30
1

Hi you can should include javascript in your plugin through wp-enqueue script. An about your form you can create a shortcode to display it. let me show you an example:-

  add_action('wp_enqueue_scripts','ir_jscripts');
   function ir_jscripts()
   {
       wp_enqueue_script( 'frontend_script', plugin_dir_url(__FILE__).'/js/frontend_scripts.js', array('jquery'), '3.3.5', true );

   }

After that you can declare a shortcode and use your form there:-

  add_shortcode('login-form','login_form_callback');
   function login_form_callback()
   {
       $data = "your form here";
       return $data;
   }

after that you can use teh shortcode [login-form] to dispay your form anywhere.

And in the js file js/frontend_scripts.js in your plugin folder you can write your js code.

Hope it helps you.

Thanks

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.