December 30, 2011

Writing Javascript into a WordPress Page or Post

Recently I was interested in writing some Javascript into a WordPress Page, and came across several differing ways to do this. The one that seemed the easiest to understand was one that was analogous to writing Javascript in a regular static page, and used shortcode to insert the Javascript. So here is an example of how to write Javascript into a WordPress Page ( or post ) using the shortcode method. The following form was inserted in HTML mode, and the shortcode is inserted after it. In this case the javascript is event driven, and loops through the form collecting all the data from all the radio buttons, and setting the results in the bottom of the form. I am using ShortCode Manager plugin.
Remember to insert the shortcode after the form, so that all the DOM elements have been identified by the time the JavasScript is ready to load.
The form has each radio element the group  with a call to the JavaScript with <input onclick="loopForm( )" to run the script.


Level of Difficulty (0 being easy,4 being very hard) 0 1 2 3 4
Tying a Knot
Programming in JS
Memorizing TS Eliot Ash Wednesday

[sb name="js"]


The form is identified with form id="quizform" and contains only radio buttons, and the JavaScript short code contains the code:

var radioResults = 0;
var totalscore = document.getElementById("totalscore");

function loopForm() {
var form = document.getElementById("quizform");
radioResults = 0;
for (var i = 0; i < form.elements.length; i++ ) {

if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
//alert ("form.elements[i]: [" + i + "] was " + form.elements[i].value );
radioResults += parseInt( form.elements[i].value ) ;
}
}
}

totalscore.value = radioResults;

}

When using shortcode make sure that you have inserted the opening and closing script tags in the shortcode itself, which is not shown here.

Edward worked at Lawrence Berkeley Laboratory in the hills of Berkeley Ca in the 70's, where the current internet backbone was being developed. He consulted scientists and programmed in fortran, cobol, pascal, C, and Oracle and Informix 4gl's. He worked corporate in the city as a freelancer for 12 years. Higher Source Web Sites started developing web sites in 2001, while in the real estate business. He started blogging and developing sites for his colleagues and his company, then other Real Estate companies. His background in business programming, database administration, & software development made staying within the soft technologies more appealing than other choices. He lives in Santa Rosa Ca with his wife Pam and runs a beagle rescue with Pam, teaches chess, and loves music and cinema.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

HSS - specializing  in Law, Art, Author, Professional and Non Profit Websites - We'd love to help you -  Building websites since 2001
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram