form submit using ajax php - php

Question

submitting a simple contact form using ajax.
EDITED CODE
now trying to insert the data to database.
html form
<form align="left" method="post" class="subscribe_form" action='subscribe.php'>
Your Name:<br>
<input type="text" name="name" value="" required><br>
Your E-Mail:<br>
<input type="email" name="email" value="" required><br><br>
Gender:
<p> <input name="gender" value="male" type="radio" id="male" />
<label for="male">Male</label>
<input name="gender" value="female" type="radio" id="female" />
<label for="female">Female</label>
</p>
<br>
Company Name:
<input type="text" name="cname" value="" required><br><br>
<input type="submit" name="send" value="Subscribe" id="subscribe"> <span class="output_result"></span>
</form>
this is my ajax code :
<script>
$(document).ready(function() {
$('.subscribe_form').on('submit',function(){
// Add text 'loading...' right after clicking on the submit button.
$('.output_result').text('Sending...');
var form = $(this);
$.ajax({
type:'post',
url:'subscribe.php',
dataType: "text",
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_result').text('thank you!');
} else {
$('.output_result').text('Error!');
}
}
});
// Prevents default submission of the form after clicking on the submit button.
return false;
});
});
</script>
subscribe.php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rm";
$name = $_POST['name'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$cname = $_POST['cname'];
$sub_date = date("Y-m-d");
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "insert into rmsubscribe (name, gender, email, cname, sub_date) values ('$name', '$gender','$email','$cname','$sub_date')";
$result = (mysqli_query($conn, $sql));
echo ($result) ? 'success' : 'error'; */
mysqli_close($conn);
this code give me 'error message'.
if i use without ajax code like this,
at form ,
without the 'class="subscribe_form"..
and in subscribe.php
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
instead of this
$result = (mysqli_query($conn, $sql));
echo ($result) ? 'success' : 'error';
it works fine. 'New record created successfully' data inserted into table.
Please help me on ajax code. i am not familiar with ajax. how to make this work using ajax?

Answer 1

I think you need to add datatype to your ajax request. Actually your ajax request is expecting json and you are returning text - "Success" that is not json that's why when it gets unexpected data returned it is sending ajax response to error function. Update you code to below ajax request -
As you are returning Text as response to your ajax request so your ajax request datatype must be text as below line of code in ajax request -
dataType: "text"
Example of your expected Ajax Request
$.ajax({
type:'post',
url:'email.php',
dataType: "text",
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent Successfully!');
} else {
$('.output_message').text('Error Sending email!');
}
}
});
// Prevents default submission of the form after clicking on the submit button.
return false;
});