tl:dr; - I have a ajax post method form on submit it redirects me to the php file and does not submit the form the php file is in the root folder along with index.html, below are the code and my php here - http://codepad.org/dxJGb71K
Hello,I just started few months back into website development with html5 and css3, do not have much skill in jQuery / Ajax.i used bunch of articles i found for ajax method to submit form in my previous project it worked fine.
Now i’m using zurb foundation 5 for my single page website. which has a contact form trying to get it to work has been a challenge.when i submit the form it says " 404 file not found" and point the error at "jquery xhr "
i have tried more than 10 tutorials to get it to work now im beginning to think the ajax script is not performing its actions and just redirects me to the php file with the error text i have mentioned in the php file.i can provide the website link in the private message rather post links in main post if you want more insight about the problem.
php - http://codepad.org/dxJGb71K
<form action="process.php" id="fm_ctnt" method="POST" data-abide>
<div class="row">
<div class="large-4 small-12 columns">
<input type="text" name="name" id="name" placeholder="Name" required/>
<small class="error">Your Name is required.</small>
</div>
<div class="large-4 small-12 columns">
<input type="email" name="email" id="email" placeholder="Email" required/>
<small class="error">Your Email is required.</small>
</div>
<div class="large-6 small-6 columns">
<button type="submit" value="Submit" class="button small radius" id="submit">Send</button>
</div>
</form>
$('#fm_ctnt')
.on('valid', function () {
var name = $("input#name").val();
var email = $("input#email").val();
var dataString = 'name=' + name +
'&email=' + email +
'&suject=' + subject +
'&message=' + message;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
dataType: 'jsonp',
success: function() {
$('.contactform').html("<div id='thanks'></div>");
$('#thanks').html("<h2>Thanks!</h2>")
.append("<p>Dear "+ name +"!, I will contact you soon.</p>")
.hide()
.fadeIn(1500);
},
});//ajax call
return false;
});