how to create php echo via AJAX

Question

I am trying to create the echo via AJAX on a simple form but i do not succeed in it.

This is the form and js:

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function()
{   
    $(document).on('click', '.subscribe_newsletter', function()
    {       

        $('#subscribe_newsletter').val($(this).val());
            var data = $("#subscribe").serialize();

        $.ajax({

        type : 'POST',
        url  : 'email_subscribe.php',
        data : data,
        success :  function(data)
               {                        
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);

                        });


                    });

               }
        });
        return false;
    });  

});
</script>
<div id="form" class="subscribe_wrapper">
   <form id="subscribe" method="POST">
      <input name="email_subscribe" type="text" />
      <input class="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
   </form>
</div>

This is email_subscribe.php

// subscribe 
if (isset($_POST['email_subscribe'])) {   
   $email_add = $_POST['email_subscribe'] . ',' . "\n";
   $store = file_put_contents('database-email.txt', $email_add, FILE_APPEND | LOCK_EX);
   if($store === false) {
     die('There was an error writing to this file');
   }
   else {
     echo "$email_add successfully added!";
   }
}

The echo does not appear and neither the email is stored in the text file. Can someone tell me what i am doing wrong here?

Well then maybe $_POST['email_subscribe'] wasn’t set, in which case your PHP code would do nothing else whatsoever ... — C3roe
– C3roe, Commented Jan 29, 2018 at 15:45
Are you getting any errors on the server side or in the console? — j08691
– j08691, Commented Jan 29, 2018 at 15:45
I think your form is submitting before your AJAX request is firing. try adding a 'e.preventDefault() to your JS, and pass in e to the click handler function — WillardSolutions
– WillardSolutions, Commented Jan 29, 2018 at 15:46

Sergey · Accepted Answer · 2018-01-29 15:54:44Z

3

Try to change

$(document).on('click', '.subscribe_newsletter', function()

to

$(".subscribe_newsletter").click(function (e)

and add

e.preventDefault();

answered Jan 29, 2018 at 15:54

Sergey

3941 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stanley Nguma · Accepted Answer · 2018-01-29 16:07:50Z

1

Replace your Javascript code with this

$(document).ready(function()
{
    $('.subscribe_newsletter').click(function(e) {

      e.preventDefault();

        $('#subscribe_newsletter').val($(this).val());
            var data = $("#subscribe").serialize();

        $.ajax({

        type : 'POST',
        url  : 'email_subscribe.php',
        data : data,
        success :  function(data)
               {
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);

                        });


                    });

               }
        });
        return false;
    });

});

Note that I have replaced $(document).on('click', '.subscribe_newsletter', function() with $('.subscribe_newsletter').click(function(e) and added e.preventDefault(); on the line below

answered Jan 29, 2018 at 16:07

Stanley Nguma

3163 silver badges4 bronze badges

1 Comment

Stanley Nguma Over a year ago

Glad I could help

score 0 · Accepted Answer · 2018-01-29 16:13:50Z

Try modify your code in this way:

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function()
{   
    $(document).on('click', '.subscribe_newsletter', function()
    {       
      var data =  $('#email_subscribe').val();
        $.ajax({
        type : 'POST',
        url  : 'email_subscribe.php',
        data : {email_subscribe: data},
        success :  function(data)
               {                        
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);
                        });
                    });
               }
        });
        return false;
    });  
});
</script>
<div id="form" class="subscribe_wrapper">
   <form id="subscribe" method="POST">
      <input id="email_subscripe" name="email_subscribe" type="text" />
      <input class="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
   </form>
</div>

Collectives™ on Stack Overflow

how to create php echo via AJAX

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related