back to phpList.org

AJAX form issue

I have been trying to add an Ajax form to my website so users can register for my newsletter. The script is based on: https://www.phplist.org/manual/books/phplist-manual/page/creating-a-subscribe-page

But in the example script are some inconsistency as well?

NOTE 4: The URL used for these AJAX callbacks includes p=asubscribe, not p=subscribe like regular subscribe pages

But in the example code is set: https://installationname.yourdomain.com/lists/?p=subscribe&id=1

I have tried both https://torza.nl/lists/?p=asubscribe&id=1 and https://torza.nl/lists/?p=asubscribe&id=1

But the problem I have should not be caused by this, since my issue is that when an valid email is enter the reply is "not an correct email"

In my code: "U dient een geldig e-mail adres op te geven."

My complete code on https://torza.nl

  <div class="col-lg-4 col-md-6 footer-newsletter">
    <h4>Inschrijven nieuwsbrief</h4>
    <p>Wilt u op de hoogte blijven van de laatste ontwikkelingen en projecten van Torza, dan kunt u zich hier inschrijven.</p>

    <form method="post" name="subscribeform" id="subscribeform" enctype="multipart/form-data" style="background-color: #111058;">

    <div class="clear"><input type=text name="email" value="" id="email">
    <input type=hidden name="htmlemail" value="1" />
    <input type="hidden" name="list[11]" value="signup" /> <input type="hidden" name="subscribe" value="subscribe" />
    <button type="submit" onclick="if (checkform()) {submitForm();} return false;" style="background-color: #428BCA;">Abonneer</button>
    <div id="result" style="color: white;"></div>

    </form>

    <script type="text/javascript"> function checkform() { re = /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/; if (!(re.test(jQuery("#email").val()))) { jQuery("#result").empty().append("U dient een geldig e-mail adres op te geven."); jQuery("#email").focus(); return false; } return true; } function submitForm() { successMessage = 'U bent ingeschreven voor onze nieuwsbrieven. Uw inschrijving dient bevestigd te worden via de link die wij per e-mail hebben gestuurd.'; data = jQuery('#subscribeform').serialize(); jQuery.ajax( { type: 'POST', data: data, url: 'https://torza.nl/lists/?p=asubscribe&id=1', dataType: 'html', success: function (data, status, request) { jQuery("#result").empty().append(data != '' ? data : successMessage); jQuery('#email').val(''); }, error: function (request, status, error) { alert('Excuses, Helaas konden wij uw inschrijving niet verwerken.'); } }); } </script>

  </div>

</div>

Any suggestions what is wrong and how to fix this?

@Muiter the javascript code that validates the entered email address is too restrictive.
This part limits all but the first section of the domain to either 2 or 3 characters
{2,3}

so an email address ending in .global would fail.
Just try changing 3 to say 10.

Hi, thank you for replying. That is not the issue, it also not accepting something like gmail.com

@Muiter There is something wrong with your home page. In Firefox and Chrome I cannot type into the email address field.

@Muiter I think it’s because you have two fields with the id set “email” and that’s why you are sent to the contact form above when you click “subscribe”

Thx, I have updated the code for the color change.

Wow, good thing you have noticed that! Thank you.

Besides the solution of Suela I have changed he regex to /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ and now all email adresses are accepted.

But still one issue > when an email is accepted function submitForm() { successMessage = 'U bent ingeschreven voor onze nieuwsbrieven. Uw inschrijving dient bevestigd te worden via de link die wij per e-mail hebben gestuurd.'; is not shown. Any ideas?

@Muiter The displayed success message is sent in the response from the server. It is specified on the Settings page and also for each subscribe page, “Text to display when subscription with an AJAX request was successful”