1

I am trying to insert a small form into a WordPress page that does a minor calculation based on user input and returns an answer. Initially I tried copying the entire thing (HTML and JS (in a <script> tag) in the text editor), which displayed the HTML form fine, but trying to run the JS didn't work.

The JS looks like this:

function calculateX(){
    var inputA, inputB, total;
    inputA = document.form.inputA.value;
    inputB = document.form.inputB.value;
    total = inputA + inputB * 10;
    document.getElementById("result").innerHTML = parseInt(total);
}

The HTML form looks like this:

<form name="form">
    InputA: <input type="text" name="inputA" /><br />
    InputB: <input type="text" name="inputB" /><br />
    <input type="button" value="Calculate" onclick="calculateX()" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

I later tried creating a plugin that would run the JS while only inserting the above HTML in the page text editor while adding the JS to the calculate.js file. It looked like this:

 <?php
 /*
 Plugin Name: Calculate
 */
 function calculate() {
      wp_register_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__);
 }
 add_action('wp_enqueue_scripts', 'calculate');
 ?>

However, neither solution works. I'm pretty new to JavaScript and this is the first time I've attempted to implement a form like this in WordPress by myself, so I'm not entirely sure where it goes wrong.

The form is displayed perfectly fine, but when clicking the 'Calculate' button it does nothing.

EDIT: See @RRikesh' comments below on the process of fixing this. The code as it stands above works for me now.

closed as off-topic by RRikesh, fuxia Sep 12 '16 at 13:26

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • This question is not much about WordPress. Also: You didn't give the function a name in the wp_enqueue_script hook and you spelled getElementById wrong. – RRikesh Sep 12 '16 at 12:19
  • @RRikesh - apologies. it seems I rushed things when I wrote the description. I've fixed the errors in the post now. My actual code has a function name for the wp_enqueue_script and getElementById spelled correctly. The problem is still present. – rpbtz Sep 12 '16 at 12:47
  • 1
    Your function can't be called calculateY when the callback is calculate. Both should be the same. – RRikesh Sep 12 '16 at 12:49
1

You have a bunch of issues:

1. WordPress part:

Your function is hooked to wp_enqueue_scripts and should be like this:

function wpse238953_calculate() {
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
 }
 add_action('wp_enqueue_scripts', 'wpse238953_calculate');

Note the different spellings between wp_enqueue_scripts and wp_enqueue_script

2. The HTML/JS part:

Let's add some id to the two input fields so that it's easier to target them

<form name="form">
    InputA: <input type="text" id="inputA" name="inputA" /><br />
    InputB: <input type="text" id="inputB" name="inputB" /><br />
    <input type="button" id="calculate" value="Calculate" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

Then rewrite your JS and use some jQuery(since you added it as a dependency):

jQuery(document).ready(function($){
    'use strict';
  $('#calculate').mousedown(function(){
    var valueA = parseFloat( $('#inputA').val(), 10 ),
        valueB = parseFloat( $('#inputB').val(), 10 ),
        total = ( valueA + valueB ) * 10;

    $('#result').text( total );
  });
});

Read about:

-1

Using jQuery:

First debug and check if the function is getting called. Try alert() in your JS function.

<form name="form">
    InputA: <input type="text" class="inputA" name="inputA" /><br />
    InputB: <input type="text" class="inputB" name="inputB" /><br />
    <input type="button" value="Calculate" onclick="calculateX()" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

function calculateX(){
    total = jQuery('inputA').val() + jQuery('inputA').val();
    jQuery('#result').html(total);
}
  • I should've done debugging right away - it appears that the function is not being called as I see no pop-up from adding alert(). So presumably the error is in the plugin php, right? – rpbtz Sep 12 '16 at 12:01
  • In that case first check JS is en-queued properly, as in it appears in your html. – Aniruddha Gawade Sep 12 '16 at 13:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.