Getting error on submiting the form using AJAX

Question

I created a php file which has a form. The form takes in input, it has 4 buttons to add, display, update and delete a record from database.

Then another php file that reads the user data and manipulate according to the submit button clicked.

I want the output as Success/Error to display in the first php file as either of the submit button is clicked. It requires AJAX, but I'm new to it and not able to figure out how to make it work!!

Also if the data received from server side (the php file) is in json format, how to read it in the first php file?

<form id="form" class="col s12"><!--  action="submit.php">-->
  <div class="row">
    <div class="input-field col s12">
      <input id="id" name="id" type="text" class="validate">
      <label for="id">ID:</label>
    </div>
  </div>
<div class="row">
    <div class="input-field col s12 m6">
      <input id="firstname" name="firstname" type="text" class="validate">
      <label for="firstname">FIRST NAME:</label>
    </div>
    <div class="input-field col s12 m6">
      <input id="lastname" name="lastname" type="text" class="validate">
      <label for="lastname">LAST NAME:</label>
    </div>
  </div>
<div class="row">
    <div class="col s12 m3">
       <input type="submit" value="Add" name="add" id="add" class="btn waves-effect" >
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Display" name="display" id="display" class="btn waves-effect">
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Update" name="update" id="update" class="btn waves-effect">
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Delete" name="delete" id="delete" class="btn waves-effect">
    </div>
  </div>
</form>

This is the form.

I tried:

blog.teamtreehouse.com/create-ajax-contact-forhttp://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refreshm

https://www.formget.com/submit-form-using-ajax-php-and-jquery/

https://www.formget.com/form-submission-using-ajax-php-and-javascript/

and many more examples, but none worked!!

<script>

$(document).ready(function(){
            $("#form").submit(function(){
//                      event.preventDefault();

            $.ajax({
                    url: "submit.php",
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: "json",
                    success: function(response)
                    {
                            var data = $.parseJSON(response);
//                              var data = JSON.parse(response);
//                              console.log(data);
                            alert(data.msg);
                    },
                    error: function(xhr, status, thrown)
                    {
//                              alert(status);
                            console.log("xhr= " + xhr);
                            console.log("status= " + status);
                            console.log("error= " + thrown);
//                              console.log(response);
                    }
            });
            });
            return false;
       });
</script>

Also the php file sends data in json format only!

if(isset($_POST['add']) AND !empty($id))
{

try {

    $conn = $GLOBALS['pdo'];

    $stmt = $conn->prepare("INSERT INTO user (id, firstname, lastname, email, reg_date) VALUES (:id, :firstname, :lastname, :email, :reg_date)");

    $stmt->bindParam(':id', intval($id));
    $stmt->bindParam(':firstname', $firstname);
    $stmt->bindParam(':lastname', $lastname);
    $stmt->bindParam(':email', $email);
    $stmt->bindParam(':reg_date', $reg_date);

    $stmt->execute();
    if($stmt)
    {
//              echo "<script type='text/javascript'>alert('Successfully Added!');</script>";
            return json_encode(array('error' => 0, 'msg' => 'Added user'));
//              return true;
    }
    else
    {
            return json_encode(array('error' => 1, 'msg' => 'Failed to add user!'));
//              return false;
    }
}
catch(PDOException $e)
{
    echo "ERROR! " . $e->getMessage ;
}
$conn = null;

}

So why do you think that another example (even if provided here on a plate for you) would work? — Your Common Sense, Jan 16 '17 at 12:12
@YourCommonSense i added the code! I have been reading and trying for 4-5 hrs now. I would appreciate any help! — Winter, Jan 16 '17 at 12:33

score 0 · Answer 1 · answered Jan 18 '17 at 06:38

0

change this line first in js $( "form" ).submit(function( event )

And change this line in form method='post'

answered Jan 18 '17 at 06:38

Bhuvnesh Pratap

13
3

In the console: xhr= [object Object] status= parsererror error= SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data NetworkError: A network error occurred. – Winter Jan 18 '17 at 07:08
Now: xhr= [object Object] status= error error= Internal Server Error – Winter Jan 18 '17 at 07:19

Getting error on submiting the form using AJAX

1 Answers1