3

I'm having issues with sending data from my HTML Form to my PHP page (via JS/AJAX) while staying on my current page. Here is what I currently have in place:

HTML Section:

<!-- Begin the Form --> 

<form id="signup-form" method="POST">

<!-- Input of E-Mail --> 

<div class="seven columns">

           <input type="email" name="email" id="email" placeholder="Your E-Mail">

</div>

<!-- Send Button -->

<div class="five columns">

            <button name="submit" type="button" class="button">Subscribe</button>

</div>

<!-- End of the Form --> 

</form> 

PHP:

<?php
require_once 'MCAPI.class.php';

$apikey = 'XXXXXX';
$list_id ='XXXXXX';

$api = new MCAPI($apikey);
$email = $_POST['email'];

echo "Email: ".$email;

$merge_vars = array(' ');
// By default this sends a confirmation email - you will not see new members
// until the link contained in it is clicked!
$retval = $api->listSubscribe( $list_id, $email, $merge_vars );

if ($api->errorCode){
echo "Unable to load listSubscribe()!\n";
echo "\tCode=".$api->errorCode."\n";
echo "\tMsg=".$api->errorMessage."\n";
} else {
echo "E-Mail submitted to the pxCollective Newsletter!";
}
?>

JS:

<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
    var email = $("#email").val();

if(email=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
    $.ajax({
    type: "POST",
    url: "subscribeEmail.php",
    data: email,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    }
    });
}
return false;
});
 });
 </script>

If I don't try to keep it on the current page with JS/AJAX it'll direct to the PHP page just fine and subscribe the user to the mailing list. Any ideas as to what my issue may be?

Thanks!

3
  • data should be a key/value object pair, I think. Have you tried data: {'email': email}?
    – M Miller
    Mar 20, 2014 at 20:07
  • I've tried using the ' ' and the suggestions by Alon & Elton but neither fixes my issue. It's almost like the button click is not being caught. Is there a way I can print out logging information in the PHP page to a text file? Since I'm not even getting my emails saying I've signed up for newsletter I'm thinking we aren't making it into the PHP page. Thoughts? Mar 20, 2014 at 20:25
  • Try file_put_contents('log.txt', 'Something I want to log');.
    – M Miller
    Mar 20, 2014 at 20:28

4 Answers 4

4

This line data: email, should be data: {email: email},

0

try this

<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            var email = $("#email").val();

            if(email=='')
            {
                $('.success').fadeOut(200).hide();
                $('.error').fadeOut(200).show();
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "subscribeEmail.php",
                    data: {email: email}, // don't data: email,
                    success: function(){
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            }
            return false;
        });
    });
</script>
0

You're using $('.submit').click(), but there is no element with class submit! Your submit button is class button instead.

You should use $('#signup-form').submit() instead and change your <button> to an <input type="submit">.

-1

Try

$.ajax({
type: "POST",
url: "subscribeEmail.php",
data: {email:email},
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});

It should be "email="+email

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.