Prevent Joomla from reloading page

Question

I have a problem using a javascript inside a joomla article. On clicking the submit button, the entire page is reloaded instead of the java script being executed. The code worked when loaded in the index.php file of the joomla template, but does not work when loaded from a single article for some reason

 <div class="top"><form> <p style="text-align: right;"><label for="power">Power <input id="power" type="number" name="power" /> mW</label></p> <p style="text-align: right;"><input class="submit" type="submit" value="Calculate" /></p> </form></div> 

The java script

<script type="text/javascript">

/*jslint node: true */
/*global $, jQuery, alert*/
"use strict";
var $jQ = jQuery.noConflict();
alert(location.hostname);
jQuery(document).ready(function () {
    $jQ("form").submit(function (event) {
        alert("Calculate");
        event.preventDefault();
    });
});
</script>

Can anyone help me where this is going wrong?

Answer 1

If it works when you add the code manually to a PHP file but not when placed in an article then your editor is probably removing or altering the code. Check your editor settings for something like 'Allow JS' (where this setting is depends on your editor). Alternatively, try setting the editor to 'none' and see if that works.

Answer 2

it looks fine, try debugging the ready() call, by placing an alert() call (or better a console.log() ) inside the code, and possibly replacing the ready event to jQuery's:

<script type="text/javascript">
"use strict";
console.log("script is running");
jQuery(function () {
    console.log("hooking into submit");
    jQuery("form").submit(function (event) {
        event.preventDefault();
        console.log("alternate submit");
    });
});
</script>

Then open the console to see the logs (key F12 ) this should at least give you some pointers on where it gets stuck.