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"/>
</svg>
<!-- 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"/>
</svg>
<!-- 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"/>
</svg>
</div>
<!-- /progress-button -->
</form>
<script>
// SVG Animated Button Code
[].slice.call( 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>
<script type="text/javascript">
// listen for the form submission
$("#form1").submit(function(event) {
// disallow browser form submissions
event.preventDefault();
// once submitted, put the form data into a serialized string
var formData = $("#form1").serialize();
$.ajax({
url: "php/send.php", // <-- existing PHP file
type: 'POST',
data: formData,
success: function (
}
});
});
</script>
<!--PHP script Below-->
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// set your variables from the post values
$name = $_POST["name"];
$email = $_POST["EMAIL"];
$message = $_POST["Message"];
$to = 'someemail@email.com';
$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';}
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
<!--/PHP script-->