Question

我想运行ajax来获取值，如果值为true，则提交表单，使用onsubmit = xxx下面的代码，但此表单将立即提交，而不是等待ajax结果。然后我想使用带有onclick函数的“a”标签来提交表单，这可以完成这项工作，但是当我使用“enter”键提交表单时，不会运行ajax代码。然后我想在光标位于输入字段时绑定按键以提交表单。如何检查光标是否在表单字段中？

<?php 
    if(isset($_POST['act'])){
        $rs=array(
            'status'=>0
        );
        echo json_encode($rs);
        exit;
    }
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="filters">
    <form onsubmit="return filters.submit()">
        <input type="text" name="name" />
        <input type="submit" value="submit" />
    </form>
</div>

<script type="text/javascript">
    var filters={
        form: $('.filters').find('form'),
        submit: function (){
            $.ajax({
                url:'index.php',
                type:'POST',
                data:{
                    act:'ajax'
                },
                success:function(rs){
                    eval('var rs='+rs);
                    if(rs['status']==1){
                        return true;
                    }else{
                        return false;
                    }
                }
            });
        }
    }
</script>

Answer 1

document.activeElement返回当前关注的元素，即，如果用户输入任何键击事件，将会获得击键事件。

Answer 2

正如@Rajesh Jinaga所说，document.activeElement返回当前关注的元素，但我想解释一下为什么它不起作用。

当你进行ajax调用时，它不会等到ajax返回true或false。它会执行。所以你需要阻止表单被提交，并在你的ajax调用结束时用javascript提交它。

<强> HTML

   <form>
        <input type="text" name="name" />
        <input type="submit" value="submit" />
    </form>

JAVASCRIPT（jQuery）

   $('form').submit(function (e){

        $.ajax({
            url:'index.php',
            type:'POST',
            data:{
                act:'ajax'
            },
            success:function(rs){
                // No need of EVIL eval('var rs='+rs);
                if(rs['status']==1){
                    $(this).submit(); // Will submit the form.
                }else{
                    alert("FAILED!");
                }
            }
            return false; // Shortcut for e.preventDefault() and e.stopPropagation() so it will prevent the form to be submitted.
        });

Answer 3

$（this）.submit（）将无法工作，因为您处于不同的上下文中，成功回调调用程序发送ajax相关对象但不形成DOM对象。将对象存储到表单上下文中的变量中，并在成功回调中使用它。

 $(function(){
    $('form').submit(function (){
       var form = this;
        $.ajax({
            url:'index.php',
            type:'POST',
            data:{
                act:'ajax',
                status: $('[name=status]').val()
            },
            success:function(rs){
                eval('var rs='+rs);
                if(rs['status']==1){
                    $(form).submit();   // or $('form').submit()
                }else{
                    alert('error');
                }
            }
        });
        return false;
    });
});

Answer 4

@ L105，感谢您的回答，我修改了我的代码以符合您的答案，但表单无法使用$（this）.submit（）;

提交

<?php 
    if(isset($_POST['act'])){
        $rs=array(
            'status'=> $_POST['status']
        );
        echo json_encode($rs);
        exit;
    }
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="filters">
    <form action="index.php" method="post">
        <input type="text" name="status" />
        <input type="submit" value="submit" />
    </form>
</div>

<script type="text/javascript">
    $(function(){
        $('form').submit(function (){
            $.ajax({
                url:'index.php',
                type:'POST',
                data:{
                    act:'ajax',
                    status: $('[name=status]').val()
                },
                success:function(rs){
                    eval('var rs='+rs);
                    if(rs['status']==1){
                        $(this).submit();   // can't submit
                    }else{
                        alert('error');
                    }
                }
            });
            return false;
        });
    });
</script>

我怎么知道光标现在焦点在输入或textarea或选择

4 个答案: