Call a JavaScript function from a Wordpress page?

Question

I've added the following function to my wordpress theme javascript file wp-content/themes/xxx/js/script.js

function calculateBmi() {
  var weight = document.bmiForm.weight.value
  var height = document.bmiForm.height.value
  if (weight > 0 && height > 0) {   
    var finalBmi = weight/(height/100*height/100)
    document.bmiForm.bmi.value = finalBmi
    if (finalBmi < 18.5) {
      document.bmiForm.meaning.value = "That you are too thin."
    }
    if (finalBmi > 18.5 && finalBmi < 25) {
      document.bmiForm.meaning.value = "That you are healthy."
    }
    if (finalBmi > 25) {
      document.bmiForm.meaning.value = "That you have overweight."
    }
  }
  else{
    alert("Please Fill in everything correctly")
  }
}

I have added the following code on a wordpress page (in admin) with a form that calls the function when you press the button

<form name="bmiForm">
  Your Weight(kg): <input type="text" name="weight" size="10"><br />
  Your Height(cm): <input type="text" name="height" size="10"><br />
  <input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
  Your BMI: <input type="text" name="bmi" size="10"><br />
  This Means: <input type="text" name="meaning" size="25"><br />
  <input type="reset" value="Reset" />
</form>

Nothing happens when I click the button and chrome console gives the following message.

Uncaught ReferenceError: calculateBmi is not defined ?page_id=1368:126 onclick

What is it that is wrong?

Sounds like your JS file isn't included properly. Take a look at codex.wordpress.org/Using_Javascript to see how to do this the right way. — Joren
It's theme creator that created the .js-file and that person's functions works and the include looks like: wp_enqueue_script('custom_script',$jscriptURL.'script.js', array('jquery'), '1.0', true); — Xtreme
On a side note, please mind that JavaScript does not have block scopes. — toniedzwiedz
@Xtreme The function calculateBmi may not be defined globally. See if it's embedded within another function. If it is, then accessing it depends on whether script.js exposed it to other scripts. — Jonathan Lonowski
Created a new .js without 'jquery' (no dependencies). Works now. — Xtreme

brasofilo brasofilo · Accepted Answer · 2014-05-20T21:45:48

It's just a matter of enqueuing properly. First, a test page with the HTML provided. Note the use of the global $b5f_hook to catch our page afterwards.

add_action( 'admin_menu', 'add_auxiliary_menu' );

function add_auxiliary_menu() 
{
    global $b5f_hook;
    $b5f_hook = add_menu_page(
        'Test', 
        '<span style="color:#e57300;">Test</span>', 
        'edit_pages', 
        'b5f_page_id', 
        'b5f_page_callback',
        '', // icon default for empty
        1  // create before Dashboard menu item
    );
}
function b5f_page_callback()
{
    ?>
    <form name="bmiForm">
      Your Weight(kg): <input type="text" name="weight" size="10"><br />
      Your Height(cm): <input type="text" name="height" size="10"><br />
      <input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
      Your BMI: <input type="text" name="bmi" size="10"><br />
      This Means: <input type="text" name="meaning" size="25"><br />
      <input type="reset" value="Reset" />
    </form>
    <?php
}

Enqueuing the script, not sure why jQuery is being included as dependency, but it doesn't matter:

add_action( 'admin_enqueue_scripts', 'b5f_enqueue' );
function b5f_enqueue( $hook )
{
    global $b5f_hook;
    if( $hook !== $b5f_hook ) # Not our page, bail out
        return;

    $jscriptURL = get_stylesheet_directory_uri() . '/js/script.js';
    wp_enqueue_script( 'custom_script', $jscriptURL, array('jquery'), '1.0', true );
}

And the script file contains the JS code provided:

function calculateBmi() { /* rest of the code */ }

Call a JavaScript function from a Wordpress page?

2 Answers