表单使用ajax 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;   
    });