CODEWITHSUNDEEP
phphtmlajax
Kevin
Kevin

Reputation: 928

Ajax success message

I have a page where I'm trying to use some ajax to output a success message. The success message has to be on the same page.

I found this code online and changed it, but for some reason its not working.

My HTML: 

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scroll to top</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!--     MENU    -->
  <header>
    <div class="headerBar">
      <a href="/">
        <img class="logo-small" src="img/logo-vdb-small.svg" alt="Logo">
      </a>
      <button class="menuBtn menuBtn-htx">
        <span>toggle menu</span>
      </button>
    </div>
    <nav>
      <ul>
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="over.php">Over ons</a>
        </li>
        <li><a href="diensten.php">Diensten</a>
        </li>
        <li><a href="vacatures.php">Vacatures</a>
        </li>
        <li><a href="portfolio.php">Portfolio</a>
        </li>
        <li><a href="contact.php">Contact</a>
        </li>
      </ul>
    </nav>
    <!-- Menu animation -->
    <script>
      $('.menuBtn').click(function(e) {
        e.preventDefault();
        (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
        $('nav').slideToggle();
      });
    </script>
  </header>


  <!-- slider -->
  <script type="text/javascript" src="slider/slick/slick.min.js"></script>
  <script type="text/javascript" src="slider/slick/slides.js"></script>
  <link rel="stylesheet" type="text/css" href="slider/slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="slider/slick/slick-theme.css" />
</head>

<body>

  <div id="container">

    <div class="textboxblack">
      <cms:editable name='page_title' label='Pagina titel' type='text'>
        <h1>WHO WE ARE</h1>
      </cms:editable>

    </div>

    <div class="textboxwhite">

      <cms:editable name='icon_1' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'>
        <i class="fa fa-home fa-3x" aria-hidden="true"></i>
      </cms:editable>

      <cms:editable name='title_1' label='Content titel' type='richtext'>
        <h2>Onze historie</h2>
      </cms:editable>

      <div class="divider-black"></div>

      <cms:editable name='content_1' label='Content' type='richtext'>

        <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum. Nulla tincidunt felis quis fringilla gravida. Nam fermentum ornare aliquam.
          Aliquam rutrum tortor nunc. Nulla ut tincidunt risus. Nunc commodo, neque eget venenatis finibus, tortor sem posuere eros, sed interdum nisl eros non leo. Mauris eu feugiat magna.Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit.
          Donec augue lorem.</p>

        <div class="round-image">
          <img src="img/3.jpg" alt="" height="260" width="260" />
        </div>


        <p class="italic-15">Sed interdum nisl eros non leo. Mauris eu feugiat magna.Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem.</p>

      </cms:editable>


    </div>

    <div class="textboxblack">
      <cms:editable name='icon_2' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'>
        <i class="fa fa-trophy fa-3x" aria-hidden="true"></i>
      </cms:editable>

      <cms:editable name='title_2' label='Content titel' type='richtext'>

        <h2>Awards</h2>

      </cms:editable>

      <div class="divider-white"></div>
      <cms:editable name='content_2' label='Content' type='richtext'>
        <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum. Nulla tincidunt felis quis fringilla gravida.</p>
      </cms:editable>
    </div>


    <div class="textboxwhite">
      <cms:editable name='icon_3' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'>

        <i class="fa fa-leaf fa-3x" aria-hidden="true"></i>
      </cms:editable>
      <cms:editable name='title_3' label='Content titel' type='richtext'>

        <h2>Duurzaam</h2>
      </cms:editable>

      <div class="divider-black"></div>
      <cms:editable name='content_3' label='Content' type='richtext'>
        <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum.</p>
      </cms:editable>
    </div>
    <div class="textboxblack">
      <cms:editable name='icon_4' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'>


        <i class="fa fa-heart fa-3x" aria-hidden="true"></i>
      </cms:editable>

      <cms:editable name='title_4' label='Content titel' type='richtext'>


        <h2>We work for</h2>
      </cms:editable>
      <div class="divider-white"></div>



      <div class="slider" style="image-size:cover;">
        <div>

          <p class="italic-15">K.N.V.B</p>

        </div>
        <div>

          <p class="italic-15">HEMA</p>

        </div>
        <div>

          <p class="italic-15">ETOS</p>

        </div>
        <div>

          <p class="italic-15">EN MEER</p>

        </div>
      </div>


    </div>
    <div class="textboxwhite">


      <cms:editable name='title_5' label='Content titel' type='richtext'>




        <h2>Op de hoogte blijven</h2>
      </cms:editable>
      <cms:editable name='content_5' label='Content' type='richtext'>


        <p class="italic-15">Lorem ipsum's dolor onzin teksten.</p>
      </cms:editable>
    </div>

    <form class="subscribe" action="subscribe.php" method="POST">
      <input type="email" name="subscribefield" required="true" placeholder="Awe" />
      <button type="submit"><i class="fa fa-paper-plane fa-lg" aria-hidden="true"></i>
      </button>
    </form>

    <script>
      $.ajax({
        url: 'subscribe.php',
        data: {
          email = emailVal
        },
        type: 'post',
        success: function(output) {
          //do whatever after the POST is successful
          alert("AJAX request successfully completed");
        }
      });
    </script>


    <div id="footer-top">
      <div class="contact-text">
        <i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
        </br>
        <div class="divider-white"></div>
        <p class="italic-12">Vivamus sagittis lacus vel augue laoreet.</p>
        <p class="italic-12">Vivamus sagittis lacus.</p>
        <p class="italic-12">Vivamus sagittis lacus vel augue laoreet.</p>
      </div>
      <div id="contact">
        <i class="fa fa-envelope fa-lg custom1"></i>
        <i class="fa fa-phone fa-lg custom2"></i>

      </div>
    </div>
    <!-- End top footer -->
    <!-- bottom footer -->
    <div id="footer-bottom">
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-linkedin" aria-hidden="true"></i>

    </div>
  </div>
</body>

</html>

I added the ajax code between script tags in the html file. I will now post the ajax alone: 

<script>
  $.ajax({
    url: 'subscribe.php',
    data: {
      email = emailVal
    },
    type: 'post',
    success: function(output) {
      //do whatever after the POST is successful
      alert("AJAX request successfully completed");
    }
  });
</script>

And finally php: 

<?php
header("Refresh:7; url=contact.php");
?>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <?php

$email = $_POST['subscribefield'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<center><div class=\"textboxwhite\"><p>Dit adres klopt niet</p></div></center>";
die();
}


$to = "[email protected]";
$subject = "Abonee voor de nieuwsbrief";
$body = "$email \n Heeft zich aangemeld voor de nieuwsbrief";

mail($to, $subject, $body);



?>
  </body>
</html>

I'm still a beginner trying to learn I'd appreciate if you would help me out.

Upvotes: 0

Views: 116

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

This is the main reason, you need to use a good Syntax Highlighter (Linter) and organise (or indent) your code. This is an invalid syntax:

data: {
  email = emailVal
},

It is supposed to be an object. Objects have the key: value pairs with : and not =. Change it to:

data: {
  email: emailVal
},

Final Code:

$.ajax({
  url: 'subscribe.php',
  data: {
    email: emailVal                   // Change here...
  },
  type: 'post',
  success: function(output) {
    //do whatever after the POST is successful
    alert("AJAX request successfully completed");
  }
});

Upvotes: 2

Related Questions