PHP form POST from AJAX

Hello everyone,

I appreciate any help I may receive with my issue. I have been building a website for a client and had everything completed when he approached me about adding a svg animated button to his contact us form. I originally had a standard contact form with a php page; however because he wanted this animated button he deiced to not redirect to the php page and have the button animate instead. After some trial and error I have been able to get AJAX to not redirect the page by have AJAX POST to the php. But unfortunately while the animation works my form data is not being sent to the php page and i’m not getting an email like i should.

Here is my html form code, ajax, animated script, and the php page. I imagine i’ve just been stareing at this for so long i’ve simiply overlooked something. Thank you for all your help!

<form class="contact-form"  id="form1">
  <i class="mdi-action-account-box"></i>
  <input type="text" class="form-control" name="name" placeholder="Name">

  <i class="mdi-content-mail"></i>
  <input type="email" class="form-control" name="EMAIL" placeholder="Email">                  
  <textarea class="form-control" name="Message" placeholder="Message" rows="4"></textarea>  
			     <!-- progress button -->
<div id="progress-button" class="progress-button">
	<!-- button with text -->
	<button type="submit"><span>Submit</span></button>

	<!-- svg circle for progress indication -->
	<svg class="progress-circle" width="70" height="70">
		<path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>

	<!-- checkmark to show on success -->
	<svg class="checkmark" width="70" height="70">
		<path d="m31.5,46.5l15.3,-23.2"/>
		<path d="m31.5,46.5l-8.5,-7.1"/>

	<!-- cross to show on error -->
	<svg class="cross" width="70" height="70">
		<path d="m35,35l-9.3,-9.3"/>
		<path d="m35,35l9.3,9.3"/>
		<path d="m35,35l-9.3,9.3"/>
		<path d="m35,35l9.3,-9.3"/>

<!-- /progress-button -->

		// SVG Animated Button Code
			[] document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
				new UIProgressButton( bttn, {
					callback : function( instance ) {
						var progress = 0,
							interval = setInterval( function() {
								progress = Math.min( progress + Math.random() * 0.1, 1 );
								instance.setProgress( progress );

								if( progress === 1 ) {
									instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
									clearInterval( interval );
							}, 150 );
				} );
			} );
<script type="text/javascript">
    // listen for the form submission
    $("#form1").submit(function(event) {
        // disallow browser form submissions
        // once submitted, put the form data into a serialized string
        var formData = $("#form1").serialize();
            url: "php/send.php", // <-- existing PHP file
            type: 'POST',
            data: formData,
            success: function (
<!--PHP script Below-->

    // set your variables from the post values
    $name = $_POST["name"];
    $email = $_POST["EMAIL"];
    $message = $_POST["Message"];

$to = '';
$message = 'FROM: '.$name.' EMAIL: '.$email.'Message: '.$message;
$headers = 'From: EMAIL' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    if(mail($to, $subject, $message, $headers);){
        echo "Success"; // success message
    } else {echo 'Connection Error';}
    echo "Invalid Email, please provide an correct email.";

<!--/PHP script-->

Do you see the POST request in browser’s console when form is submitted?

No it does not seem to be running when i click. The only thing i see is my script for animation.

Actually i was looking in the wrong area of chrome my appoligies. It is showing me the following under network>headers

Content-Type:text/html; charset=UTF-8
Date:Wed, 20 Jan 2016 20:07:19 GMT
Keep-Alive:timeout=2, max=100
Request Headers
view source
Accept-Encoding:gzip, deflate
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2626.0 Safari/537.36
Form Data
view source
view URL encoded

Since i was able to look at the post i realized my error. Turns out it was an issue in the php code i had one extra { tucked away in there. removed and was able to receive information thank you for your nudge in the right direction.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.