Question

这里有两种形式的fregister和register。在第一种形式我输入名称，用户名和通过点击检查用户ID按钮检查用户名的可用性。如果用户名不可用我在PHP的帮助下显示消息，并希望向用户显示此消息与字段他之前填满了。

<?php RegFormCrAndValid($name,$username,$email) {?>
    <form name="fregister"  method="post">
        <table>
        <tr><td>Name</td>
        <td><input type="text" id="name" name="name" value ="<?php echo $name;?>" onChange="ValidAllAlpha()" required></td>
        <td><span id="ErrorName"></span></td></tr>
        <tr><td>Username</td>
        <td><input type="text" id="user" name="UsrText" value="<?php echo $user;?>" required onblur="SetNextElement()"></td>
        <td><?php  echo $_SESSION['ErrorUserMsg']?></td> <td><input type="submit" name="CheckUsr" value="Check User ID"></td> </tr> </form>

在第二种形式中，用户将首先在这里注册检查可用性，然后通过点击注册进行提交。如果用户没有成功注册，那么我也希望显示带填充字段的消息。

<form name="register" method="post">
    <td style="display:none"><input type="text" id="fname" name="fname" required></td>
    <td style="display:none"><input type="text" id="fuser" name="fuser" required></td>
    <tr><td>Email</td>
    <td><input type="email" id="email" name="email" value="<?php echo $email;?>" onChange="ValidateEmail()" required></td>
    <td><span id="ErrorEmail"></span></td></tr>
    <tr><td><input type="submit" name="submitForm" value="Submit" onClick="ValidationCheckOnSubmit('register');return false;"></td></tr>
    </form>
</body>
</html>

这里没有显示两行，因为他们在javascript的帮助下从表格fregister中获取名称和用户名的值，然后显示它们。

JavaScript代码//验证在那里，我在这里提到将值传递给fname和fuser的代码

 function SetNextElement()
                {           
                         document.getElementById('fname').value = document.getElementById('name').value;

                document.getElementById('fuser').value = document.getElementById('user').value;
                }
<?php }?> //RegFormCrAndValid($name,$username,$email) this function getting closed over here

php编码

if(isset($_POST['CheckUsr']))
    {
        if(IsUsernameAvail($_POST['UsrText'])) //IsUsernameAvai checking for the username availabilty return true if available as false
        {   
            $_SESSION['ErrorUserMsg']="<font color=red>This Username Is Available</font>";
        }
        else
        { 
            $_SESSION['ErrorUserMsg']="<font color=red><--Username is not available</font>";
        }

    }

    if(isset($_POST['submitForm']))
    {
        if(IsUsernameAvail($_POST['fuser']))
        {   
            echo 'You have been successfully registered'; 
        }
        else
        { 
            $_SESSION['ErrorUserMsg']="<font color=red><--Username is not available</font>";
            RegFormCrAndValid($_POST['fname'],$_POST['fuser'],$_POST['email']);
        //RegFormCrAndValid($name,$username,$email) is the function in which whole html and javascript code is there to create and validate the form.
        }

    }
    else{   if(isset($_POST['CheckUsr']))
            {

                RegFormCrAndValid($_GET['name'],$_POST['UsrText'],'');

            }
            else  RegFormCrAndValid('','','');

        }

我的问题

在单击CheckUserId按钮时，我希望页面仅保留在那里，为什么单击它后不会保留在同一页面上，所有字段填充都由用户填写。它应该只执行检查，为什么页面重新加载？
如果我能够停留在同一页面上，那么我不需要再次调用RegFormCrAndValid（$ name，$ username，$ email）这个函数来重建我的表单，是否有可能留在那里填充填充而不是调用功能。
我想根除使用假列来再次显示用户名和姓名，因为在实际注册表格中会有很多字段，而且我不能为所有字段进行虚假调用或分配。

我不想使用ajax或jquery，想通过javascript，php和html实现一切。

Answer 1

当您点击<input type="submit" name="CheckUsr" value="Check User ID">时，表单正在提交，因为这就是点击提交按钮所做的事情，除非您有javascript来阻止它并执行其他操作。

当页面被提交回服务器时，页面将重新加载。

现在，基于您的基本目标：您必须了解您正在进行的确定用户名是否可用的实际检查是在服务器端，即逻辑驻留在服务器上。然而，用户在其上键入用户名的表单位于客户端，即驻留在用户计算机上，通过浏览器显示。现在，一旦用户键入名称，您就需要将该数据传递到服务器端，以便进行检查并相应地执行操作。因此，您有两种选择：

a）像现在一样提交表单，并使用服务器端php代码收集用户填写的所有数据并再次填充

b）不要提交表单，只需向php脚本发出ajax请求，该脚本将输入用户名并返回给你一个你可以使用javascript捕获的真或假响应，并相应地允许表单提交或不提交。

在这种情况下，在提交按钮onclick事件或表单onsubmit事件触发器上设置一个javascript函数来发出ajax请求，如果ajax请求返回false则返回“false false”或者如果ajax请求返回true则返回“return true” 。同样在“false case”中，您可以使用getElementById为用户设置错误消息。

Answer 2

回答（a）

您正在使用表单提交操作

表单提交的默认行为是它将重新加载页面。您必须使用return false来取消表单提交的默认行为。但不建议您使用AJAX

示例代码

$('#yourFormId').submit(function () {
 //business logics here
 return false;//to avoid page reload
});

您不再需要提交按钮上的onclick事件：

<input class="submit" type="submit" value="Send" />

保持同一页面，不要重新加载

2 个答案: