AJAX Signup Module

[jarredt]

Hello, I want to create a custom signup module to put on the left nav of my site, but am having some problems. I know how AJAX works, so I don't need to know about that. But each time I submit my form, I am sent to the ?p=subscribe&id=1 page, and asked to enter my email address again.

So here's my question: Can someone provide me with the SQL query that subscribes an email address and sends a confirmation email? That way I can easily run the query without having to deal with phplist's subscribe pages?

Thanks!

[yourownfriend]

I'm actually trying to do the same for my website but was wondering if you can share the code that you are using for your customized subscription page and if you figure it out please share that too, thanks!

[yonation]

BUMP. any success with this? i know how to do the ajax, but i need to know how to send headers. i even used firebug to see the http headers sent:

Code: Select all

http://mydomain.org/newsletter/?p=subscribe&id=1&VerificationCodeX=&email=jimmybaloney%40hellodolly.com&htmlemail=1&list%5B1%5D=signup&listname%5B1%5D=members&makeconfirmed=1&subscribe=Subscribe

i get sent back to the subscribe page. when i click submit, it works. what gives? what is it checking for that can't be sent through POST headers???

[calete]

Hi everyone :

I have successfully do it. First, I have noticed that the data sended by the ajax post omits the "subscribe/Submit" value/Button, so I made a hidden input, with the name "subscribe" and some value (anything); then I rename the submit button, so the code is:

Code: Select all

<input type="submit" name="accion" id="accion" value="Submit" />
<input type="hidden" name="subscribe" value="it's done" />


[compextra]

To all of you who have limited success in getting AJAX to work with the subscribe page, try this step!

<drumroll>...</drumroll>

#1) When creating your AJAX function, be sure to set the URL you are posting to...INCLUDING the

Code: Select all

 ?p=subscribe&id=1

part.
For whatever reason, as the form is processed through ./lists/index.php and ./lists/admin/subscribelib2.php, it appears that the subscribe/unsubscribe and the subscribe page id are retrieved by GET, where as the actual newsletters, email, verification code, etc. , are obtained via POST.

Although still not properly doctored up...I'm posting all the code I wrote and appears to work.

Code: Select all

function frmValidate()
{
   //declarations
   var x; var y; var strErrors; var strURL;

   //the HTML DIV where the errors will show up.
   document.getElementById('subscribebox_errors').innerHTML="";

   //function call....returns how many checkboxes have actually been checked. 
   var x = numberChecked();
   
   //function call....uses regular expressions to validate if the value in the email form box is
   //indeed a valid email.  Please note, I had to add an actual ID tag to the form, not just use
   //the HTML name tag.

   var y = validateEmail(document.getElementById('ml_email').value);
   
   //if neither a checkbox is checked, or it's not a valid email.
   if( (!(x>=1)) || (!y) )

   {
      //build the error text/html string
      strErrors='<ul class="error_text">Errors found:';
      
      if(!(x>=1))
      {
         strErrors = strErrors + '<li>Please select at least one newsletter.</li>';
      }
         
      if(!y)
      {
         strErrors = strErrors + '<li>Please input a valid e-mail address.</li>';
      }
   
      strErrors = strErrors + '</ul>';

      //write the error HTML to the appropriate error area.
      document.getElementById("subscribebox_errors").innerHTML=" " + strErrors;
   }
   
   else if( (x>=1) && (y=1) )
   {
      //its all good!  Begin the AJAX post procedure.
      ajaxSendSubscribeInfo();
   }
   else
   {
      //if you get here, something went really wrong.
      alert('Error!');
   }

}

function ajaxSendSubscribeInfo()
{
   //declarations
   var urlStr; var urlParams; var returnResponse;
   var sForm;
   var xmlhttp;


   //standard AJAX object creation
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   //place your PHPList URL here.  IMPORTANT! Be sure to add ?p=subscribe and the &id= if you are using these functions.
   
   urlStr = 'http://www.mydomain.org/lists/?p=subscribe&id=2';
   
   //declare your AJAX form
   sForm = document.forms["subscribeform"];
   
   //prepping POST post string.  Should probably use a proper URL encoding.  Haven't got there yet.
   urlParams = urlParams + '&email=' + escape(sForm.elements["email"].value);

   //iterate through all the checkboxes.  IMPORTANT side note regarding PHPLIST.  The list names in your form must be in this format.
   // list[1]=signup list[2]=signup etc.  Be sure to use the word "signup" (all lower case, no spaces) as the value for each list, or
   // phplist won't recognize it.

   for(var i=0;i<sForm.elements.length;i++)
   {
      if( (sForm.elements[i].type=="checkbox") && (sForm.elements[i].checked) )
         {   
               urlParams=urlParams + '&' + escape(sForm.elements[i].name) + '=' + escape(sForm.elements[i].value);      
         }
   }
   
   //must add the subscribe variable to the POST parameters. 
   urlParams = urlParams + '&subscribe=hitme';

   
   //Start POSTING via AJAX.
   xmlhttp.open("POST",urlStr,true);

   //Send the proper header information along with the request
   xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlhttp.setRequestHeader("Content-length", urlParams.length);
   xmlhttp.setRequestHeader("Connection", "close");
   
   xmlhttp.onreadystatechange = function()
   {
      if (xmlhttp.readyState == 4)
      {

         if (xmlhttp.status == 200)
         { // only if "OK"
         
            var returnResponse = String(xmlhttp.responseText);
            document.getElementById('subscribebox').innerHTML="Thank you for subscribing.  Please check your email for information about confirming your subscription.";
         }
      
         else
         {
               document.getElementById('subscribebox').innerHTML="An Error has occured while submitting your request.  Please contact the webmaster.";
         }
      }
   }

   xmlhttp.send(urlParams);
}

function validateEmail(elementValue)
{
   var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return emailPattern.test(elementValue);
}


function numberChecked()
{
   var numChecked = 0;
   
   var sForm = document.forms["subscribeform"];

   for(var i=0;i<sForm.elements.length;i++)
   {   
      if( (sForm.elements[i].type=="checkbox") && (sForm.elements[i].checked) )
      {   
            numChecked++;      
      }
   }
   
   return numChecked;
}


I hope this saves you many hours. Thanks to the developers for this product!

[yonation]

hey all, i've gone ahead and made an ajax phplist signin plugin for wordpress.

follow here and download: http://www.social-ink.net/blog/yphplista-an-ajax-wordpress-plugin-for-phplist-integration

[hort]

It's my time to give back....

Code: Select all

<form action="" method="" id="newsletter">
<input type="hidden" name="VerificationCodeX" value="" />
<input type="hidden" name="list[2]" value="signup">
<input type="hidden" name="listname[2]" value="Name_of_List"/>
<label for="name">Name</label> <input type="text" size="20" value="" name="attribute1" id="name" /><br />
<label for="email">E-mail</label> <input type="text" size="20" value="" name="email" id="email" />
<a href="javascript:;" onclick="$.ajax({type: 'POST', data: $('#newsletter').serialize(), url: 'lists/?p=subscribe&id=2', success: function(msg){ alert('Thank you for your registration. Please check your email to confirm.'); }})">OK</a>
</form>

Jquery used.
In this code there is no code validation, it up to you validate the user input information.

Hope this helps someone.
hort

[fedegonzal]

Hi all,

Somebody know why ajax posting return the same form page? I can't understand.. in my case, sometimes works and sometimes return the form

Thanks, Federico

[Mr5o1]

compextra hit the nail on the head... you need to make sure your sending both 'get' & 'post' data with your ajax request.

the get data needs to be "?p=subscribe&id=1" or so, and then the rest of the data gets "posted"

After seeing the 'get' string in the url.. I got confused and tried to submit all the data in the url.. and then wondered why it didnt work. That cost me a few hours...

[zerohero1]

Hi there

Can any of you post your code please? I haven't managed to get this to work, or point out why my code doesnt work? - thanks

Code: Select all


<form method="post" name="newsletter" id="newsletter" action="/lists/?p=subscribe&id=2">
    <input type="text" name="email" value="" size="40" />
    <input type="hidden" name="htmlemail" value="1" />
    <input type="hidden" name="list[2]" value="signup" />
    <input type="hidden" name="listname[2]" value="XXXX" />
    <input type="hidden" name="VerificationCodeX" value=""  />
    <input type="submit" name="subscribe" id="go" value="Subscribe to the Selected Newsletters" />
    </form>
    <span id="eee"></span>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#go').click(function () {
                $.ajax({
                    type: 'POST',
                    data: $('#newsletter').serialize(),
                    url: $('#newsletter').attr('action'),
                    success: function (msg) {
                        $('#eee').html(msg);
                        alert('Thank you for your registration. Please check your email to confirm.');
                    }
                })


                return false;
            });

        });
    </script>


[conrado]

Hi zerohero1,

Out of the multiple problems that there might actually be, I would start diagnosing your problem at the beginning...

1- You might not have configured phplists properly. (have you tested it to confirm it is working?)
2- Have you created the appropriate lists?
3- Are you using including jQuery properly in the html?

If all that is working fine, I suggest you brush up on some programming skills such as using a debugger. There are very good tools out there such as Firebug and Venkman. If you could be a little more specific rather than asking people to paste code we could be more specific with hints.

Best,
Conrado.

[borsodas]

I used the above code, and it loaded the success message but no confirmation was sent.

jquery is loaded on my page, as i have working effects.

php list is configured, if i go directly to the sign up page lists/?p=subscribe i can register.

[borsodas]

after comparing headers between my ajax page that did not work and the standard phplist submit form i found that the name value pair <input type=submit name="subscribe" value="Subscribe" onClick="return checkform();"> were not going through. so i added them into a hidden input and it now works. possibly because of "return false" in the ajax call. but it works now!

[atlanteavila]

after comparing headers between my ajax page that did not work and the standard phplist submit form i found that the name value pair <input type=submit name="subscribe" value="Subscribe" onClick="return checkform();"> were not going through. so i added them into a hidden input and it now works. possibly because of "return false" in the ajax call. but it works now!

Any chance you can post your full working code? Thanks a million!

[borsodas]

this is the site with the code in it

http://www.officeyoganyc.com/