CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Karuppiah RK
Karuppiah RK

Reputation: 3964

form submission with ajax error messages

I'm new to ajax concept. Here i'm trying to insert the user details(signup form) into the database. it inserted the datas into the db succesfully. But, ajax is my problem.

1) i didn't get any error message if form fields are empty. you can see my below codes i've done validation on post.php page. but, it doesn't return the error values. 2) it stores the empty values into database. 3) if datas stored successfully i want to get the success message & if datas failed to store in db i want to get the error message. How should i do these all things?

Ajax.js

$(function () {
        $('form').on('submit', function (e) {
          $.ajax({
            type: 'POST',
            url: 'post.php',
            data: $('form').serialize(),
            success: function(msg) {
              if(msg=='error_n')
              {
                  $("#e_name").html('Name required');                    
              }
              if(msg=='error_m')
              {
                   $("#e_mobile").html('Mobile required');
              }

              //success and error alert
              if(data="inserted")
              {
                alert("insertion success");
              }
              else
              {
                alert("falid to insert into database");
              }
            }
          });
         e.preventDefault();
        });
      });

Post.php

<?php

    include_once('config.php');

    $name = trim($_POST["name"]);
    $mobile = trim($_POST["mobile"]);

    if($name == "")
    {
        echo 'error_n';
    }
    if($mobile == "")
    {
        echo 'error_m';
    }

    try
    {
        $stmt = $conn->prepare("INSERT INTO sample ( Name, Mobile ) VALUES ( ?, ? )");
        $conn->errorInfo();
        $stmt->bindParam('1', $name, PDO::PARAM_STR);
        $stmt->bindParam('2', $mobile, PDO::PARAM_STR);
        $stmt->execute();
    }
    catch(PDOException $e)
    {
        'Query failed to insert into database' .$e->getMEssage();
    }

?>

Homepage.php

<p>register <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>

<div id="light" class="white_content">
  <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
   <form>
      <input type="hidden" name="form" value="values" />
      name : <input name="name" id="name" type="text" /><span id="e_name"></span> <br />
      mobile : <input name="mobile" id="mobile" type="text" /><span id="e_mobile"></span> <br />
      <input type="submit" value="submit" />
  </form>
</div>
<div id="fade" class="black_overlay"></div>

Upvotes: 0

Views: 366

Answers (1)

Hanky Panky
Hanky Panky

Reputation: 46910

After your error messages are returned, you need to stop the script execution. Your current code still tries to add the values and hence overrides your custom error messages. Most probably then your PHP returns your exception message and which is not what your JavaScript is expecting.

if($name == "")
{
    echo 'error_n';
    die(); // Stop here
}
if($mobile == "")
{
    echo 'error_m';
    die(); // Stop here
}

Also add echo 'inserted'; when your database insert is successful.

Upvotes: 2

Related Questions