Question

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');
            </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

Answer 1

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.