Javascript form processing issue in Plone

Question

I have an HTML form created in a page in Plone that is to process Javascript code I have been given upon submission. The Javascript has been placed in plone_skins > custom. The code is to check for a keyword in the URL calling the page, which indicates the address of another page that the browser will need to be redirected to after authentication with a third party service. The code looks like the following:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length; i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return false;
}

function setLoginUrl(form) {
    var target = getQueryVariable("keyword");
    var loginUrl = "https://our.shibboleth.login.address.here";
    if(target != false) {
        loginUrl = loginUrl + "?keyword=" + keyword;
    }
    form.action = loginUrl;
    return true;
}

I have disabled TinyMCE for the Plone page with accompanying form and login button so that "onsubmit" is not stripped out. Here's the code for the page:

<form name="processLogonForm" action ="" onsubmit="setLoginUrl(this);" method="post">
<input type=submit value="Instructors & Students"/>
</form>

I've tested the Javascript outside of Plone, and it redirects to the correct page as expected, and passes the information in the keyword token to the following page as well. However, in Plone, submitting the form results in the same page reloading. On a positive note, if a keyword token is included URL, that is passed to the reloaded page, but I would prefer for the submission to take users to the authorization page.

I have registered the script in Plone, enabled the use of script tags in pages, and tested other Javascript code just to ensure that I'm getting everything into Plone correctly. Any advice on what I may have overlooked with this code?

UPDATE: I've taken advice given here to create a custom page template with the code in it. I've figured out that I forgot to include metal tags to pass the script to pages using this view. I can see the script in the source of the Plone generated page. However, the page continues to reload itself.

Answer 1

I am guessing your onsubmit is getting overridden and never gets run.

There is more than just TinyMCE that uses onsubmit. Moreover, you should NOT have to disable tinymce anyways. TinyMCE should only affect pages where the editor is loaded on.

Couple things. First, verify your JS isn't getting run. Use a debugger statement or just throw an alert('hi') statement in there.

Next, since it's possible there are other things using the submit event yet, just use jQuery to do your work instead of onsubmit attribute(onsubmit isn't a nice way to do js events anyways).

Your JavaScript code would be something like this:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length; i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return false;
}

function getLoginUrl() {
    var target = getQueryVariable("keyword");
    var loginUrl = "https://our.shibboleth.login.address.here";
    if(target != false) {
        loginUrl = loginUrl + "?keyword=" + keyword;
    }
    return loginUrl;
}
$(document).ready(function(){
  $('[name="processLogonForm"]').submit(function(){
    var $el = $(this);
    $el.attr('action', getLoginUrl());
  });
})

Answer 2

This is more of a "if you don't need to do this, try this other thing" answer. Rather than trying to get this to work despite transforms and TinyMCE, if all you need to do is run some JS you should consider creating a custom view template and putting everything you need in there; none of it will get touched by the transforms. It's a clean way of bypassing Plone if (as I think is the case here) you don't actually need Plone's features.