Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-06-2013, 12:21 PM   PM User | #1
tmacka88
New Coder

 
Join Date: Nov 2012
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
tmacka88 is an unknown quantity at this point
AJAX form- not displaying error msgs?

Hi all,

Ok so I have setup my form and everything is working fine with AJAX. Form is posting to mysql fine and error messages are working before AJAX was implemented.

I have now implemented AJAX and the form still works but being new to PHP, jquery, mysql I cant figure out how to evolve my code to allow for the error messages to be passed back into the form through AJAX.

At the moment i only receive the "Thank's" msg that within my jquery code even when an error has occurred. I want this to be a variable and display the error if one occurs and if not then display my normal "Thank's" msg.

Here is what I have:

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
          $("div#notif-me-msg-box").hide();
          $("#form-submit").click(function() {
                    $.post('../bin/mdu-notif-form-2.php', {
                    'guest-email':$("#form-email").val()
          },
          function(response) {
                    $("div#notif-me-msg-box #notif-msg").html("Thank's. You will be notified when Multi Display Utility has launched");
                    $("div#notif-me-msg-box").slideUp().slideDown("normal");
            }
          );
                    return false;
          });
          $("div#notif-me-msg-box").click(function() {
                    $(this).slideUp("normal");
          })
});






</script>
<style>
#notif-me-msg-box {
          width:100%;
          height:30px;
          position: absolute;
          top:0;
          left:0;
          cursor:pointer;
          background-color:#CCC;
}
#notif-msg {
          line-height:30px;
          padding-left:10px;
}
</style>
</head>


<body>




<div id="notif-me-msg-box"><span id="notif-msg"></span></div>

<form id="notif-form">
<input id="form-email" autocomplete="on" placeholder="email" type="text" />
<input id="form-submit" type="submit" value="Submit" />
</form>




</body>
</html>
and here is my php file:

PHP Code:
<?php


define
('DB_NAME''name');
define('DB_USER''user');
define('DB_PASSWORD''pass');
define('DB_HOST''localhost');




$link mysql_connect(DB_HOSTDB_USERDB_PASSWORD); 


if (!
$link) {
          die(
'Could not connect: ' mysql_error());
}


$db_selected mysql_select_db(DB_NAME$link);


if (!
$db_selected) {
          die(
'Can\'t use ' DB_NAME ': ' .  mysql_error());
}


$value $_POST['guest-email'];
//email validation
if (isset($value) == true && empty($value) == false) {
  
          if (
filter_var($valueFILTER_VALIDATE_EMAIL) == true) {
} else {
           die(
'Enter a valid email!');
          }
}
//empty email validation
if (empty($value)) {
                    die(
'Email required');
          }


$sql "INSERT INTO `mdu-notifier` (email) VALUES ('$value')";


if (!
mysql_query($sql)) {
          die(
'Error: ' mysql_error());
}

mysql_close();
?>
So what do I need to add in both the php and html pages to get the error messages to appear within the html page using AJAX?

I have seen other tutorial using a lot more jquery but i find my version is easy to understand, can I keep this and still make it work or do i need all new AJAX implementation?

Thanks in advanced...

PS. i was looking on the jquery site and hought maybe that I have to use the .ajaxError() and ajaxSuccess() etc
tmacka88 is offline   Reply With Quote
Old 02-07-2013, 03:41 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,383
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
This line of code in the $post method section:
Code:
$("div#notif-me-msg-box #notif-msg").html("Thank's. You will be notified when Multi Display Utility has launched");
Forces the return code to the thanks line and not what is returned from the php file.
Your php file has no echo statements so it wouldn't return anything anyway.

Put the
Code:
"Thank's. You will be notified when Multi Display Utility has launched"
as an echo in ...form-2.php when it is successful and change main file line to this:
Code:
$("div#notif-me-msg-box #notif-msg").html(response);
And for your question you need to also echo the error upon a failure.
sunfighter is online now   Reply With Quote
Reply

Bookmarks

Tags
ajax, errors

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:57 PM.


Advertisement
Log in to turn off these ads.