Trying to display errors next to input fields in ajax / jquery / php form

In this basic jQuery, AJAX, PHP form I want to display errors next to inputs instead of the bottom of the form. I use if(empty(something)) { jQuery here }. Why won't this work? Whats the best practice to do this? Thank you.

    HTML:
    Name:<input type="text" id="name" /> <span id="name_error"></span>

    <input type="button" value="Update!" id="update" /> <span id="name_error"></span>
    <span id="update_status"></span>

    PHP

    <?php
    include('init.inc.php');
    if(isset($_POST['name'])) {
        $name = mysql_real_escape_string(htmlentities($_POST['name']));

        if(empty($name)) {
            ?>

            // Why wont this work here?  It just outputs the the whole thing as text.  in the update_status div (You can see that in the ajax part at the bottom of the code).

            <script>
                $('#name_error').text('Name required');
            <开发者_StackOverflow/script>

            <?php

            if(!empty($name)) {
        $query = mysql_query("UPDATE users SET
                                name = '$name'
                                WHERE user_id = ".$_SESSION['user_id']."
                                ");
        if($query === true) {
            echo 'Your settings have been saved';
            } else if($query === false) {
                echo 'Unable to save your settings';
                }
        }
    }

            // This is the jQuery / AJAX part -- no issues here.  Just have it to include both parts.

    $('#update').click(function() {
    var name = $('#name').val();

    $('#update_status').text('Loading...');

    $.ajax({
        type: 'POST',
        url: 'page.php',
        data: 'name='+name,
        success: function(data) {
            $('#update_status').text(data);
            }
        });
    });

CODE UPDATED

Why aren't you checking for empty before the form submit?

You can stop the form submission and check for empty values with javascript, if all is clear then you can submit the form.

You can do this, but you are specifiying .text()

What you need to do is jQuery("#update_status").html(data);

jQuery("#update").click( function(){
  if(jQuery.trim(jQuery("#name").val()) == ''){ alert("empty"); return false; }
  jQuery.post("page.php", {name:jQuery("#name").val()}, function(html){
    jQuery("#update_status").html(html);  
  });
});

Note that you PHP page is going to return more than just your intended code as it is now. It is going to try and return the form again also.

You need to wrap your processing and from in separate if/else statement. Better to put them in two separate files and keep ajax stuff separate.

That's a really bad way to do it. The reason it doesn't work is because that JavaScript needs to be parsed and run by the browser first, that's a whole different story and would involve using eval(). The better way to do it would be to send back a JSON object, then use it in your JavaScript to display the message to the user.