I am attempting to create an AJAX signup form with PHP list.
network tab in Chrome is showing the request go through, “status 200 OK”
the signup form works if it simply posts to the ?p=subscribe url, but when I use the JQuery AJAX call it loads the success message, but the request does not go through.
<form id="newsletter" method="post" action="ttp://www.officeyoganyc.com/lists/?p=subscribe" name="subscribeform"><input type="hidden" name="formtoken" value="a7d1884b463ed70e91fb62a5121e9846" />
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" autofocus="autofocus" autocomplete="on" size="12"/>
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
<div class="fieldHolder2">
<div class="attributeinput2"><input type=text name=emailconfirm value="confirm email" autocomplete="off" size="12"/>
<script language="Javascript" type="text/javascript">addFieldToCheck("emailconfirm","Confirm your email address");</script></div>
</div>
<input type="hidden" name="list[1]" value="signup"><input type="hidden" name="listname[1]" value="office yoga list"/><div style="display:none"><input type="text" name="VerificationCodeX" value="" size="20"></div>
<div id="subscribe"><input type=image src="http://www.officeyoganyc.com/themes/zen/zen/images/yogaSubmit.png" id="go" name="subscribe" value="Subscribe"></div>
</form>
The javascript
$(document).ready(function () {
$('#go').click(function () {
$.ajax({
type: 'POST',
data: $('#newsletter').serialize(),
url: $('#newsletter').attr('action'),
success: alert('yes'),
})
return false;
});
});
the ?p=subscribe page looks like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<link rev="made" href="mailto:phplist%40tincan.co.uk" />
<link rel="home" href="http://www.phplist.com" title="phplist homepage" />
<link rel="copyright" href="http://tincan.co.uk" title="Copyright" />
<link rel="license" href="http://www.gnu.org/copyleft/gpl.html" title="GNU General Public License" />
<meta name="Author" content="Michiel Dethmers - http://www.phplist.com" />
<meta name="Copyright" content="Michiel Dethmers, Tincan Ltd - http://tincan.co.uk" />
<meta name="Powered-By" content="phplist version 2.10.14" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Subscribe to our Newsletters</title><link href="styles/phplist.css" type="text/css" rel="stylesheet">
</head>
<body bgcolor="#ffffff" background="images/bg.png">
<a name="top"></a>
<div align=center>
<table cellspacing=0 cellpadding=0 width=710 border=0>
<tr>
<td bgcolor="#000000" rowspan=3><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
<td bgcolor="#000000"><img height=1 alt="" src="images/transparent.png" width=708 border=0></td>
<td bgcolor="#000000" rowspan=3><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
</tr>
<tr valign="top" align="left">
<td>
<!--TOP TABLE starts-->
<TABLE cellSpacing=0 cellPadding=0 width=708 bgColor=#ffffff border=0>
<TR vAlign=top>
<TD colSpan=2 rowspan="2" height="63" background="images/topstrip.png"><a href="http://www.phplist.com" target="_blank"><img src="images/masthead.png" border=0 width=577 height=75></a></TD>
<TD align=left
background="images/topstrip.png" bgcolor="#F0D1A3"><FONT
size=-2> <I>powered by: </I><BR> <B>[<A class=powered
href="http://www.php.net/" target=_new><I>PHP</I></A>]</B> + <B>[<A
class=powered href="http://www.mysql.com/"
target=_new>mySQL</A>]</B></FONT></TD></TR>
<TR vAlign=bottom>
<TD vAlign=bottom width=132
background="images/topright.png" bgcolor="#F0D1A3"><SPAN
class=webblermenu>PHPlist</SPAN></TD></TR>
<TR>
<TD bgColor=#000000><IMG height=1 alt=""
src="images/transparent.png" width=20
border=0></TD>
<TD bgColor=#000000><IMG height=1 alt=""
src="images/transparent.png" width=576
border=0></TD>
<TD bgColor=#000000><IMG height=1 alt=""
src="images/transparent.png" width=132
border=0></TD></TR>
<TR vAlign=top>
<TD> </TD>
<td><div align=left>
<br />
<h1>Subscribe to our newsletters</h1>
<br/><font class="required">required fields are marked red</font><br/>
<script language="Javascript" type="text/javascript">
function checkform() {
for (i=0;i<fieldstocheck.length;i++) {
if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].type") == "checkbox") {
if (document.subscribeform.elements[fieldstocheck[i]].checked) {
} else {
alert("Please enter your "+fieldnames[i]);
eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
return false;
}
}
else {
if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") {
alert("Please enter your "+fieldnames[i]);
eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].focus()");
return false;
}
}
}
for (i=0;i<groupstocheck.length;i++) {
if (!checkGroup(groupstocheck[i],groupnames[i])) {
return false;
}
}
if(! compareEmail())
{
alert("Email Addresses you entered do not match");
return false;
}
return true;
}
var fieldstocheck = new Array();
var fieldnames = new Array();
function addFieldToCheck(value,name) {
fieldstocheck[fieldstocheck.length] = value;
fieldnames[fieldnames.length] = name;
}
var groupstocheck = new Array();
var groupnames = new Array();
function addGroupToCheck(value,name) {
groupstocheck[groupstocheck.length] = value;
groupnames[groupnames.length] = name;
}
function compareEmail()
{
return (document.subscribeform.elements["email"].value == document.subscribeform.elements["emailconfirm"].value);
}
function checkGroup(name,value) {
option = -1;
for (i=0;i<document.subscribeform.elements[name].length;i++) {
if (document.subscribeform.elements[name][i].checked) {
option = i;
}
}
if (option == -1) {
alert ("Please enter your "+value);
return false;
}
return true;
}
</script><form method=post name="subscribeform"><input type="hidden" name="formtoken" value="da83cba748a20613fba4ed1db9aadaea" /><table border=0>
<tr><td><div class="required">Email</div></td>
<td class="attributeinput"><input type=text name=email value="" size="40">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></td></tr>
<tr><td><div class="required">Confirm your email address</div></td>
<td class="attributeinput"><input type=text name=emailconfirm value="" size="40">
<script language="Javascript" type="text/javascript">addFieldToCheck("emailconfirm","Confirm your email address");</script></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>
</table><input type="hidden" name="list[1]" value="signup"><input type="hidden" name="listname[1]" value="office yoga list"/><div style="display:none"><input type="text" name="VerificationCodeX" value="" size="20"></div><p><input type=submit name="subscribe" value="Subscribe" onClick="return checkform();"></p>
</form><br/><br/>
<p><a href="http://www.officeyoganyc.com/lists/?p=unsubscribe&id=1">Unsubscribe</a></p>
<p align=left><a href="http://www.phplist.com"><img src="http://powered.phplist.com/images/2.10.14/power-phplist.png" width=70 height=30 title="powered by phpList version 2.10.14, © phpList ltd" alt="powered by phpList2.10.14, © phpList ltd" border="0"></a></p></div>
</td>
<td>
<div class="menutableright">
</div>
</td>
</tr>
<tr><td colspan="4"> </td></tr>
<tr><td colspan="4"> </td></tr>
</table>
<!--TOP TABLE ends-->
</td></tr>
<tr>
<td bgcolor="#000000" colspan=3><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
</tr>
<tr>
<td bgcolor="#000000"><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
<td bgcolor="#ff9900" class="bottom">© <a href="http://tincan.co.uk" target="_tincan" class="urhere">tincan limited</a> | <a class="urhere" href="http://www.phplist.com" target="_blank">phplist</a></td>
<td bgcolor="#000000"><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
</tr>
<tr>
<td bgcolor="#000000" colspan=3><img height=1 alt="" src="images/transparent.png" width=1 border=0></td>
</tr>
<tr>
<td colspan=3><img height=3 alt="" src="images/transparent.png" width=1 border=0></td>
</tr>
<tr>
<td colspan=3>
</td>
</tr>
</tbody>
</table>
</div>
</body></html>
i believe it’s not sending the ajax properly. your success code is firing before the ajax gets sent, not as a response. you want:
success: function() { alert(‘yes’); }
unfortunately i don’t see what the problem might be. one thing that’s helpful is to check the Web Inspector of Safari/Chrome. You can see in the Resources tab the ajax call, it’s headers, and any response from the server.