By ezra-g on
I've created a customized PHPList subscribe which allows users to sign up for mailing lists asynchronously using scriptaculous (and protoype). The form works by itself in a static .html page but not when added as part of a drupal page with the input type set to PHP.
I'm using drupal_set_html_head to include the prototype and scriptaculous libraries. When I click the JS subscribe button and call form.serialize on the form id, i get a "form has no properties" error from prototype on line 1616. I've tried to recreate the problem in the static page by nesting the form in similar divs as Drupal creates for the node, but without any luck.
The code in 3 parts:
Here's what I enter into the body field in drupal:
<?php
drupal_set_html_head($data = '
<script type="text/javascript" src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/lib/prototype.js"></script>
<script type="text/javascript" src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/src/scriptaculous.js"></script>
<script type="text/javascript" src="http://www.ezra-g.com/jslists/lists.js"></script>');
?>
<div id="inputdiv" name="inputdiv">
<form name="subscribeform" id="subscribeform1" method="post" action ="http://www.ezra-g.com/lists/?p=subscribe&id=1" onsubmit="return false">
<div class="required">Email</div></td>
<td class="attributeinput"><input type="text" name="email" value="" size="40">
</td></tr>
<tr><td><div class="required">Confirm email</div></td>
<td class="attributeinput"><input type="text" name="emailconfirm" value="" size="40">
</td></tr><tr><td colspan=2>
<span class="attributeinput"><input type=checkbox name="htmlemail" value="1" /></span>
<span class="attributename">I prefer to receive emails in HTML format</span></td></tr>
<tr><td><div class="required">Name</div></td><td class="attributeinput">
<input type="text" name="attribute5" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">City</div></td><td class="attributeinput">
<input type="text" name="attribute6" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">State</div></td><td class="attributeinput">
<input type="text" name="attribute7" class="attributeinput" size="40" value=""></td></tr>
<p>Please select the newsletters you want to sign up to:</p><ul class="list"><li class="list"><input type="checkbox" name="list[3]" value="signup" /><b>Music Performance and Recording</b><div class="listdescription"><input type="hidden" name="listname[3]" value="Music Performance and Recording"/></div></li><li class="list"><input type="checkbox" name="list[4]" value="signup"/><b>Web Development</b><div class="listdescription"><input type="hidden" name="listname[4]" value="Web Development"/></div></li></ul><p>
<button type="submit" id="submit_1">submit</button>
</form><br/><br/>
<p><a href="http://www.ezra-g.com/lists/?p=unsubscribe&id=1">Unsubscribe</a></p>
<input type="submit" name="subscribe" value="Subscribe to the Selected Newsletters" onClick="return checkform();" style="display:none;">
<button onClick="submitform1()" id="submit_2">Add Record!</button><span id="subspan" style="display:none;"><img src="http://www.ezra-g.com/common/img/indicator.white.gif"/> </span>
</div>
Here is the resulting page that drupal generates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>testmail | Ezra B. Gildesgame</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/misc/drupal.css";</style>
<script type="text/javascript" src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/lib/prototype.js"></script>
<script type="text/javascript" src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/src/scriptaculous.js"></script>
<script type="text/javascript" src="http://www.ezra-g.com/jslists/lists.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/misc/textarea.js"></script>
<script type="text/javascript" src="/misc/collapse.js"></script>
<link rel="shortcut icon" href="/files/box_grey_favicon.jpg" type="image/x-icon" />
<style type="text/css" media="all">@import "/modules/event/event.css";</style><style type="text/css" media="all">@import "/modules/location/location.css";</style><style type="text/css" media="all">@import "/themes/box_grey/style.css";</style></head>
<div id="container">
<body >
<div id="header">
<form action="/search/node" method="post" id="search_theme_form">
<div><div id="search" class="container-inline"><div class="form-item">
<input type="text" maxlength="128" name="edit[search_theme_form_keys]" id="edit-search_theme_form_keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" value="Search" class="form-submit" />
<input type="hidden" name="edit[form_token]" id="edit-form_token" value="eb66d101967f5eda2d822d048f70d6eb" />
<input type="hidden" name="edit[form_id]" id="edit-search-theme-form" value="search_theme_form" />
</div>
</div></form>
<h1 id="site-name"><a href="/" title="Index Page">Ezra B. Gildesgame</a></h1>
<ul id="primary">
<li><a href="/blog" title="my blog">Funk-Plaza</a></li>
<li><a href="/contact" title="">Contact</a></li>
</ul>
<!-- -->
<br class="clear" />
</div>
<div class="breadcrumb"><a href="/node">Home</a></div><div id="top-nav">
<ul id="secondary">
<li><a href="/user" title="">Your Account</a></li>
</ul>
</div>
<div id="container2">
<div class="sidebar" id="sidebar-left">
<div class="block block-user" id="block-user-1">
<h2>Ezra</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/" title="">Home</a></li>
<li class="leaf"><a href="/blog/1">my blog</a></li>
<li class="leaf"><a href="/blinddatemovie" title="">Blind Date Movie</a></li>
<li class="leaf"><a href="http://www.flickr.com/photos/98743768@N00/?saved=1" title="Photos">Photo</a></li>
<li class="leaf"><a href="/calendar" title="">Events</a></li>
<li class="expanded"><a href="/node/add" title="">create content</a>
<ul class="menu">
<li class="leaf"><a href="/node/add/blog" title="">blog entry</a></li>
<li class="leaf"><a href="/node/add/book" title="">book page</a></li>
<li class="leaf"><a href="/node/add/forum" title="">forum topic</a></li>
<li class="leaf"><a href="/node/add/image" title="">image</a></li>
<li class="leaf"><a href="/node/add/page" title="">page</a></li>
<li class="leaf"><a href="/node/add/story" title="">story</a></li>
</ul>
</li>
<li class="leaf"><a href="/map/macro">build a GMap macro</a></li>
<li class="leaf"><a href="/map/node">node locations</a></li>
<li class="leaf"><a href="/map/user">user locations</a></li>
<li class="leaf"><a href="/logout" title="">log out</a></li>
</ul>
</div>
</div>
<div class="block block-menu" id="block-menu-146">
<h2>Worthwhile Websites</h2>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/keywords/worthwhile-websites" title="Websites organized by tag">All Tags</a></li>
<li class="leaf"><a href="/keywords/google-sites" title="">Google</a></li>
<li class="leaf"><a href="http://www.ezra-g.com/keywords/maps" title="">Maps, GIS and Related API's</a></li>
<li class="leaf"><a href="/keywords/music" title="">Music</a></li>
<li class="leaf"><a href="/keywords/music-tagging" title="">Music Tagging</a></li>
<li class="leaf"><a href="/keywords/online-communities" title="">Online Communities</a></li>
</ul>
</div>
</div>
<div class="block block-menu" id="block-menu-148">
<h2>Admin</h2>
<div class="content">
<ul class="menu">
<li class="collapsed"><a href="/admin" title="">administer</a></li>
</ul>
</div>
</div>
</div>
<div id="contentdiv">
<h2 class="content-title">testmail</h2>
<ul class="tabs primary">
<li class="active"><a href="/testmail" class="active">view</a></li>
<li><a href="/node/1974/edit">edit</a></li>
<li><a href="/node/1974/outline">outline</a></li>
<li><a href="/node/1974/track">track</a></li>
</ul>
<!-- start main content -->
<!-- begin content --><div class="node">
<div class="content">
<div id="inputdiv" name="inputdiv">
<form name="subscribeform" id="subscribeform1" method="post" action ="http://www.ezra-g.com/lists/?p=subscribe&id=1" onsubmit="return false">
<div class="required">Email</div></td>
<td class="attributeinput"><input type="text" name="email" value="" size="40">
</td></tr>
<tr><td><div class="required">Confirm email</div></td>
<td class="attributeinput"><input type="text" name="emailconfirm" value="" size="40">
</td></tr><tr><td colspan=2>
<span class="attributeinput"><input type=checkbox name="htmlemail" value="1" /></span>
<span class="attributename">I prefer to receive emails in HTML format</span></td></tr>
<tr><td><div class="required">Name</div></td><td class="attributeinput">
<input type="text" name="attribute5" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">City</div></td><td class="attributeinput">
<input type="text" name="attribute6" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">State</div></td><td class="attributeinput">
<input type="text" name="attribute7" class="attributeinput" size="40" value=""></td></tr>
<p>Please select the newsletters you want to sign up to:</p><ul class="list"><li class="list"><input type="checkbox" name="list[3]" value="signup" /><b>Music Performance and Recording</b><div class="listdescription"><input type="hidden" name="listname[3]" value="Music Performance and Recording"/></div></li><li class="list"><input type="checkbox" name="list[4]" value="signup"/><b>Web Development</b><div class="listdescription"><input type="hidden" name="listname[4]" value="Web Development"/></div></li></ul><p>
<button type="submit" id="submit_1">submit</button>
</form><br/><br/>
<p><a href="http://www.ezra-g.com/lists/?p=unsubscribe&id=1">Unsubscribe</a></p>
<input type="submit" name="subscribe" value="Subscribe to the Selected Newsletters" onClick="return checkform();" style="display:none;">
<button onClick="submitform1()" id="submit_2">Add Record!</button><span id="subspan" style="display:none;"><img src="http://www.ezra-g.com/common/img/indicator.white.gif"/> </span>
</div>
</div>
</div>
<a id="comment"></a>
<div class="box">
<h2 class="title">Post new comment</h2>
<div class="content"><form action="/comment/reply/1974" method="post" id="comment_form">
<div><div class="form-item">
<label>Your name: </label>
<a href="/user/1" title="View user profile.">Ezra</a>
</div>
<div class="form-item">
<label for="edit-subject">Subject: </label>
<input type="text" maxlength="64" name="edit[subject]" id="edit-subject" size="60" value="" class="form-text" />
</div>
<div class="form-item">
<label for="edit-comment">Comment: <span class="form-required" title="This field is required.">*</span></label>
<textarea cols="60" rows="15" name="edit[comment]" id="edit-comment" class="form-textarea resizable required"></textarea>
</div>
<fieldset class=" collapsible collapsed"><legend>Input format</legend><div class="form-item">
<label class="option"><input type="radio" name="edit[format]" value="1" checked="checked" class="form-radio" /> Filtered HTML</label>
<div class="description"><ul class="tips"><li>Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd></li><li>Lines and paragraphs break automatically.</li></ul></div>
</div>
<div class="form-item">
<label class="option"><input type="radio" name="edit[format]" value="2" class="form-radio" /> PHP code</label>
<div class="description"><ul class="tips"><li>You may post PHP code. You should include <?php ?> tags.</li></ul></div>
</div>
<div class="form-item">
<label class="option"><input type="radio" name="edit[format]" value="3" class="form-radio" /> Full HTML</label>
<div class="description"><ul class="tips"><li>Lines and paragraphs break automatically.</li></ul></div>
</div>
<a href="/filter/tips">More information about formatting options</a></fieldset>
<input type="hidden" name="edit[form_token]" id="edit-form_token" value="6f2473ee259eaebabd35ed50c8f894b1" />
<input type="hidden" name="edit[form_id]" id="edit-comment-form" value="comment_form" />
<input type="submit" name="op" value="Preview comment" class="form-submit" />
</div></form>
</div>
</div>
<!-- end content --> </div>
</div>
<div id="footer">
<p>(C) 2006 Ezra B. Gildesgame<br />
<div class="block block-block" id="block-block-1">
<h2>Music I've Been Listening to:</h2>
<div class="content"><p><a href="http://www.last.fm/user/ezra-g/?chartstyle=basic10"><img src="http://imagegen.last.fm/basic10/oartists/5/ezra-g.gif" border="0" /></a></p>
</div>
</div>
</p>
<!-- footer -->
</div>
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=2082641;
var sc_invisible=1;
var sc_partition=19;
var sc_security="f2823f2b";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c20.statcounter.com/counter.php?sc_project=2082641&java=0&security=f2823f2b&invisible=1" alt="free hit counter code" border="0"></a> </noscript>
<!-- End of StatCounter Code -->
</body>
</html>
And here is the static html page where the form works properly:
<html>
<head>
<title>Sample Database Program</title>
<script src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/lib/prototype.js"/>
<script src="http://www.ezra-g.com/common/js/scriptaculous-js-1.6.4/src/scriptaculous.js" />
<script src="http://www.ezra-g.com/jslists/lists.js"/>
</head>
<body>
<div class="node">
<div class="content">
<div id="inputdiv" class = "input">
<form name="subscribeform" id="subscribeform" method="post" action ="" onsubmit ="return false">
<div class="required">Email</div></td>
<td class="attributeinput"><input type=text name=email value="" size="40">
</td></tr>
<tr><td><div class="required">Confirm email</div></td>
<td class="attributeinput"><input type=text name=emailconfirm value="" size="40">
</td></tr><tr><td colspan=2>
<span class="attributeinput"><input type=checkbox name="htmlemail" value="1" /></span>
<span class="attributename">I prefer to receive emails in HTML format</span></td></tr>
<tr><td><div class="required">Name</div></td><td class="attributeinput">
<input type=text name="attribute5" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">City</div></td><td class="attributeinput">
<input type=text name="attribute6" class="attributeinput" size="40" value=""></td></tr>
<tr><td><div class="required">State</div></td><td class="attributeinput">
<input type=text name="attribute7" class="attributeinput" size="40" value=""></td></tr>
</table><p>Please select the newsletters you want to sign up to:</p><ul class="list"><li class="list"><input type="checkbox" name="list[3]" value="signup" /><b>Music Performance and Recording</b><div class="listdescription"><input type=hidden name="listname[3]" value="Music Performance and Recording"/></div></li><li class="list"><input type="checkbox" name="list[4]" value="signup" /><b>Web Development</b><div class="listdescription"><input type=hidden name="listname[4]" value="Web Development"/></div></li></ul><p>
<button type="submit">submit</button>
</form><br/><br/>
<p><a href="http://70.47.104.31/lists/?p=unsubscribe&id=1">Unsubscribe</a></p>
<input type=submit name="subscribe" value="Subscribe to the Selected Newsletters" onClick="return checkform();" style="display:none;">
<button onClick="submitform1()">Add Record!</button><span id="subspan" style="display:none;"><img src="http://www.ezra-g.com/common/img/indicator.white.gif"/> </span>
</div>
</div> </div>
<div id="div2"></div>
<div name="viewdiv" id="viewdiv" style="display:none;">
Super secret
</div>
</body>
</html>
There's a bit of extra code in there as I took the script from another example program that I was writing.
Thank you for any help!
and the code for jslists.js
function selectfield(field) {
//document.getElementById('field').
//set the field focus
}
function submitform1() {
var params = Form.serialize('subscribeform');
alert(params);
new Ajax.Updater('div2', 'http://www.ezra-g.com/lists/?p=subscribe&id=1', {
asynchronous:true,
method: "post",
parameters: params,
onLoading: function(request) {Element.show('subspan')},
onSuccess: function(request) {addok()}
});
}
function addok() {
Element.hide('subspan')
//Form.reset('form1')
}
function phoneswitch() {
var area = document.getElementById("phoneareacode").value
var arealength=area.length
if (arealength == 3)
{
Field.focus('phone1')
}
}
function divadd() {
Effect.BlindUp('viewdiv')
Effect.BlindDown('inputdiv')
Element.hide("newrec")
Element.show("view")
}
function divview() {
Effect.BlindUp("inputdiv")
Effect.BlindDown("viewdiv")
Element.hide("view")
Element.show("newrec")
}
Comments
posting everything actually helped
See it? Why is your name different to the ID?
The ID is the bit that matters.
.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/
.dan. is the New Zealand Drupal Developer working on Government Web Standards
My Typo -- that's not the issue
pardon me, I copied 2 different versions of the program. I had changed the form's ID in both the script and the form to try to troubleshoot and ended up posted different versions in this question on the form. Even with the id's matching as they do i still get the form has no properties error.
Ezra Barnett Gildesgame
Hm. It's still the place to
Hm.
It's still the place to be looking.
What does alert(document.getElementByID("subscribeform1")) return?
if it's 'Array' you have two forms with the same ID, and that's wrong.
If it's blank, you have invalid DOM or something. Always try validating the source before trusting modern Javascripts like prototype.
It SHOULD be DOMElement or something like that, and rememeber, prototype initialization has to happen at onLoad or later, so you should be turning it on with the Drupal addLoadEvent, not by just inlining anything.
.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/
.dan. is the New Zealand Drupal Developer working on Government Web Standards
The problem was
a conflict with drupal.js . I copied the generated source of my page into a static html file. The JS worked properly on my local machine but not on my webserver, so I figured that some include with a relative path was causing a conflict and narrowed it down. Instead of using drupal_set_html I'm using the S/P Ajax module to include scriptaculous.
Hope this is helpful to anyone with a similar issue!
Ezra Barnett Gildesgame