Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •