尝试在ajax / jquery / php表单中显示输入字段旁边的错误

时间:2011-10-12 20:42:40

标签: php jquery html ajax

在这个基本的jQuery,AJAX,PHP表单中,我希望在输入旁边显示错误而不是表单的底部。我使用if(empty(something)) { jQuery here }。为什么这不起作用?这样做的最佳做法是什么?谢谢。

    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

2 个答案:

答案 0 :(得分:1)

这是一个非常糟糕的方法。它不起作用的原因是因为JavaScript需要首先被浏览器解析并运行,这是一个完全不同的故事,并且涉及使用eval()。更好的方法是发送回JSON对象,然后在JavaScript中使用它来向用户显示消息。

答案 1 :(得分:1)

为什么不在表单提交前检查空?

您可以停止表单提交并使用javascript检查空值,如果一切都清楚,那么您可以提交表单。

你可以这样做,但是你正在指定.text()

你需要做的是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);  
  });
});

请注意,PHP页面将返回的不仅仅是您现有的代码。它也会尝试再次返回表单。

您需要将处理包装在单独的if / else语句中。最好将它们放在两个单独的文件中,并将ajax的内容分开。