How to call javascript function in wordpress using inline function call?

Question

I have been setting up my plugin in the wordpress admin area. I have a form that stores information from the user. In my file input type, I have javascript function call to my custom javascript that I link to it. This is the line: <li>Category Image:<input type="file" name="category[image]" id="cat_image" onchange="javascript:ImageUpload()" /></li>. however, it returns an error that says undefined function ImageUpload(), surely the function wasn't able to be located. What I was thinking is maybe there is a wordpress function to call for this or is there I need to set up first? But I already link my custom js and it is working. The problem is how to call certain js function from my wordpress php file in the admin area? I hope you guys understand this. Thanks. Here are my codes:

plugin_file.php

 <form method="post" name="new_category" id="product_category" enctype="multipart/form-data"> 
 <ul class="add_prod">
 <li>Category Title:<input type="text" name="category[title]" id="cat_title" value="" placeholder="Title" /> </li>
 <li>Category Description:<textarea rows="4" cols="40" name="category[description]"></textarea></li>
 <li>Category Image:<input type="file" name="category[image]" id="cat_image" onchange="javascript:ImageUpload()" /></li>
 <li><input type="submit" name="submit" id="submit" value="Submit details" class="btn-submit"/></li>
 </ul>  
 </form>

js file:

function ImageUpload() {
    $("#return").show();
    $("#return").html('');
    $("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...');
    $("#imageform").ajaxForm({
        target: '#return',
        success: function() {
            $("#return").fadeOut(10000);
        }
    }).submit();

}

Prince Singh · Accepted Answer · 2013-09-25 04:15:07Z

1

Make sure your js file is loaded before being called .

You can do something like this

<?php
    add_action('wp_head','js_call'); // make sure js is loaded in head

    function js_call() {  ?>
    <script>

    function ImageUpload() {
        jQuery("#return").show();
        jQuery("#return").html('');
        jQuery("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...');
        jQuery("#imageform").ajaxForm({
            target: '#return',
            success: function() {
                jQuery("#return").fadeOut(10000);
            }
        }).submit(); 


    </script>

<?php    } ?>

answered Sep 25, 2013 at 4:15

Prince Singh

5,2035 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eli Over a year ago

But I already loaded it with add_action( 'admin_enqueue_scripts', array('jun_product','theme_name_scripts')); What is the different with that with wp_head?

Eli Over a year ago

And they are a separate file. The js is separated to my plugin file. So I will just call a js function from my plugin file to my custom js file

Prince Singh Over a year ago

with admin_enqueue_scripts it will load your js code for backend pages only, try this add_action( 'wp_enqueue_script', array('jun_product','theme_name_scripts')) codex.wordpress.org/Function_Reference/wp_enqueue_script

Prince Singh Over a year ago

To make sure your js is loaded check your page source

Eli Over a year ago

I check my page source now. Yes it is loaded but still didn't work,still undefine function error return

|

Collectives™ on Stack Overflow

How to call javascript function in wordpress using inline function call?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related