Ajax call won't pass - form always submitted by php - php

Question

I've a form which is submitting with php uri_request by default.
Now i was trying to add an ajax call to submit the form, but it's still submitting with php
The ajax call for submitting the form is:
$(document).ready(function() {
$("#contactform").submit(function(e) {
e.preventDefault();
});
$.ajax({
cache: false,
type: 'POST',
data: ("#contactform").serialize(),
url: 'formfiles/submit.php',
// for ajax the submit.php is on a
success: function() {
// separate page
$('#contactform').fadeOut(200).submit();
$('#success').delay(200).fadeIn(200);
}
});
return false;
});
and the html form attributes are:
<form action="#n" class="active" method="post" name="contactform" id="contactform">
Also the
e.preventDefault
at the beginning of the ajax call won't work, but without the ajax it work (only the prevent default!)
What is wrong with the code? Why it doesn't work?
Thanks in advance for any help
EDIT here is the html {in an include file ( the hole site is a php dynamic structure)}
<form action="#n" class="active" method="post" name="contactform" id="contactform">
<div class="column">
<div class="obb" style="<?php echo $color[11];?>">
All fields are mandatory
</div>
<div >
<label style="<?php echo $color[0]; ?>"> Name:</label>
<input class="con_campo required" name="name" value="" id="name" type="text" />
</div>
<div >
<label style=""><?php echo $color[8]; ?> </label>
</div>
<div class="fieldcontent prod" id="pr">
<label style=""> <?php echo $color[2]; ?></label>
<select name="prod" value="" id="products" class="selectx required">
<option value=""> -- Select -- </option>
<option value="1"> ITA</option>
<option value="2">DE</option>
<option value="3"> FR</option>
<option value="4">EN</option>
</select>
</div>
<div class="fieldcontent prod" id="in">
<label style="<?php echo $color[4]; ?>"> Address:</label>
<input name="address" value="" id="address" class="required" type="text" />
</div>
<div class="fieldcontent prod" id="ci">
<label style="<?php echo $color[6]; ?>"> City:</label>
<input name="city" value="" id="city" class="con_campo required" type="text" />
</div>
<div class="fieldcontent info help" id="me" >
<label style="<?php echo $color[10]; ?>">Message:</label>
<textarea id="message" name="message" value="" class="cs_comment required" ></textarea>
</div>
<div id="code" style="margin-bottom:25px;">
<label style="<?php echo $color[11]; ?>; width:340px;"></label>
<input type="text" name="code" class="chapta" size="10" maxlength="7" id="code"/>
</div>
</div>
<div class="column" >
<div class="obb"> </div>
<div class="fieldcontent prod" id="co">
<label style="<?php echo $color[1]; ?>">Surname:</label>
<input name="surname" value="" id="surname" class=" required" type="text"/>
</div>
<div >
<label style="<?php echo $color[9]; ?>">Email: </label>
<input name="email" value="" id="email" class=" required email" type="text" />
</div>
<div class="fieldcontent help prod" id="do">
<label style="<?php echo $color[3]; ?>">Domain:</label>
<span style="font-size:20px; margin-left:30px;"> http://</span>
<input name="domain" id="domain" class=" required" type="text" value="" />
</div>
<div class="fieldcontent prod" id="re">
<label style="<?php echo $color[5]; ?>">Region:</label>
<input name="region" value="" id="region" class=" required" type="text" />
</div>
<div class="fieldcontent prod" id="pa">
<label style="<?php echo $color[7]; ?>" >State:</label>
<input name="state" value="" id="state" class="con_campo required" type="text" />
</div>
</div>
<div>
<div class="bottom">
<input type="submit" id="submitButton" name="submit" value="submit" />
<br /><br /><br />
</div>
</form>
</div></div>
<script>
$(document).ready(function() {
$("#contactform").submit(function(e){
$.ajax({
cache: false,
type: 'POST',
data: $("#contactform").serialize(),
url : 'formfiles/submit.php', // for ajax the submit.php is on a
success: function() { // separate page
$('#contactform').fadeOut(200).submit();
$('#success').delay(200).fadeIn(200);
}
});
});
});

Answer 1

You can restructure your code to fix the problem as below. You don't need return false; since e.preventDefault(); is gonna take care of it.
$(document).ready(function () {
$("#contactform").submit(function (e) {
e.preventDefault();
$.ajax({
cache: false,
type: 'POST',
data: $("#contactform").serialize(), //note that $ mark is added
url: 'formfiles/submit.php', // for ajax the submit.php is on a
success: function () { // separate page
$('#contactform').fadeOut(200).submit();
$('#success').delay(200).fadeIn(200);
}
});
});
});

Answer 2

You have an error in the ajax call in the line data: ("#contactform").serialize(). It should be data: $("#contactform").serialize()
Try this :
$(document).ready(function() {
$("#contactform").submit(function(e){
$.ajax({
cache: false,
type: 'POST',
data: $("#contactform").serialize(),
url : 'formfiles/submit.php', // for ajax the submit.php is on a
success: function() { // separate page
$('#contactform').fadeOut(200).submit();
$('#success').delay(200).fadeIn(200);
},
error: function(error_response){
console.log(error_response);
}
});
});
});
Update :
I see some issues with your code.
Is the required jQuery library loaded ? I don't see that in the html you had pasted. Hopefully you have included it in the header or so.
Add an e.preventDefault (); to prevent the form's default action since the input type is submit. If you don't put that the form will be submitted by default method.
I don't see the script tag closed. You should close the script tag else it will not work. Please see below the updated code:
<script type="text/javascript">
$(document).ready(function() {
$("#contactform").submit(function(e){
e.preventDefault();
$.ajax({
cache: false,
type: 'POST',
data: $("#contactform").serialize(),
url : 'formfiles/submit.php', // for ajax the submit.php is on a
success: function() { // separate page
$('#contactform').fadeOut(200).submit();
$('#success').delay(200).fadeIn(200);
}
});
});
});
</script>
New Update
Here your ajax call is returning no data. So the server will not know whether the call is success or not, it will always go to the success function. So you have to check whether the response is success or not. From the PHP page return some string like success to show whether the validation or form submission and its processing has been success or else return the error. Also on success callback you are submitting form again, so this will continue as a never ending loop.
Please make the below changes :
<script type="text/javascript">
$(document).ready(function() {
$("#contactform").submit(function(e){
e.preventDefault();
$.ajax({
cache: false,
type: 'POST',
data: $("#contactform").serialize(),
url : 'formfiles/submit.php', // for ajax the submit.php is on a
success: function(response) { // separate page
if (response == 'success') {
//write what you want to do on success
$('#success').delay(200).fadeIn(200);
} else {
//show error
}
}
});
});
});
</script>
Hope this helps