Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

[solved] JavaScript problems :: Google Maps and Form validation and submit

Go to End

2 Posts   3282 Views


Community Member, 5 Posts

7 March 2010 at 6:52am

Edited: 10/03/2010 3:31am

Hi all-

I'm fairly new to SilverStripe (using 2.3.6), and I've been implementing a new site and running into all kinds of problems related to JavaScript. I've packed all 3 issues in this one topic, as I wonder if they are all related.

I have a contact page that contains a Google map and a form. The Google map does not render, and the form does not validate or send an email. Note that I have tried MANY things, including (but not limited to) setting jQuery.noConflict(); creating a custom JS validator; including my own jquery Requirement; etc. (This page was originally written in HTML/JS with a perl script to validate/submit the form, and both the map and the form worked well.)

Issue I'm seeing wrt Google maps:
- As shown in the code below, I've issued alerts in the JS code before and after the call to Google's LatLng class. The class is not found, so the JS dies and my map never renders.

Issue wrt form:
- When I omit the required form fields and click the submit button, the page redirects back to itself, but no error message is shown. I can't figure out how to set the sessionMessage myself (as I did when the page submits successfully).
- When the required form fields are filled out, the page redirects back to itself with the Thank-you text replacing the form (see if-then control in, but no email is sent (yes, email did previously work when written in perl)

All relevant code below.


First, the PHP code:

class ContactPage extends Page {
static $db = array(
static $has_one = array(

class ContactPage_Controller extends Page_Controller {

public function init() {

// Contact page styles

function RequestConsultationForm() {
return new ContactForm($this, "RequestConsultationForm");

function doRequestConsultation($data, $form) {
// replaced email address w/ ''
$email = new Email('', '', 'Request a Consultation', 'Test message');
$form->sessionMessage('We have received your request and a member of our staff will get in touch as soon as possible.', 'good');

class ContactForm extends Form {
function __construct($controller, $name) {
$fields = new FieldSet(
new TextField('Name'),
new EmailField('Email'),
new TextField('Telephone'),
new TextareaField('Reason', 'Reason for consultation', 5, 18)
$actions = new FieldSet(
new ImageFormAction('doRequestConsultation', 'Submit', 'themes/foo/images/contact/contactsubmit.jpg')
$validator = new RequiredFields('Name', 'Email', 'Telephone', 'Reason');
parent::__construct($controller, $name, $fields, $actions, $validator);

function forTemplate() {
return $this->renderWith(array($this->class, 'Form'));


And the templates:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="" lang="en" >
<% base_tag %>
<link rel="stylesheet" type="text/css" href="hirsch/css/layout.css" />
<link rel="stylesheet" type="text/css" href="hirsch/css/typography.css" />
<link rel="stylesheet" type="text/css" href="hirsch/css/form.css" />

<script type="text/javascript" src=""></script>
<script type="text/javascript">
function gMapInit() {
alert('foo1'); // this alert shows up
var latlng = new google.maps.LatLng(42.390787,-71.155239);
alert('foo2'); // this alert does NOT show up
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("Map_canvas"), myOptions);
<body onload="gMapInit()">
// ... and so on


<div id="Content" class="typography">
<div id="Contact_lcol">
<div id="Map_canvas" class="gmap"></div>
<div id="Contact_rcol">
<div class="formcontent">

<form $FormAttributes>
<% if Message %>
<% if MessageType = good %>
<div id="Contact_thankyou">
<img src="themes/foo/images/contact/contactthankyou.gif" alt="Thank You!" />
<p id="{$FormName}_msg" class="message $MessageType">$Message</p>
<% else %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% end_if %>
<% else %>
<div id="Content_lcol">
<div id="Name" class="form_row field text">
<img src="themes/foo/images/contact/contactname.gif" alt="Name" height="13" width="73" />

<div class="form_row">
<img src="themes/foo/images/contact/contactemail.gif" alt="E-mail" height="13" width="73" />

<div class="form_row">
<img src="themes/foo/images/contact/contacttelephone.gif" alt="Telephone" height="13" width="73" />

<div id="Content_rcol">
<div id="Reason_label"><img src="themes/foo/images/contact/contactreason.gif" alt="Reason for consultation" height="13" width="173" /></div>
<div class="form_row">

<% if Actions %>
<div id="submit">
<% control Actions %>$Field<% end_control %>
<% end_if %>



<% end_if %>


Community Member, 5 Posts

9 March 2010 at 5:29am

So I have figured out the problem!

I had originally started using SilverStripe v. 2.3.3, and the template that came with this version included the following xml line at the top of
<?xml version="1.0" encoding="UTF-8"?>

When I upgraded to 2.3.6, I simply copied my templates into the theme. Apparently this line is interfering with my javascript. Once I removed this line, my Google map rendered, and my form submitted.

I looked (albeit briefly) through the upgrading docs, but didn't see anything related to this problem.