使用 AJAX 加载表单将在提交失败后丢失表单和值


load form using AJAX will loose form and values after a failed submission

我有一个PHP页面,它使用AJAX加载表单的多个部分。例如,首先检查用户是否已注册,如果是,脚本将加载(使用 AJAX(表单的其余部分。表单将不会使用 AJAX 提交,当用户提交表单(没有 AJAX(时可能会出现问题 - 想象一下有一些错误 - 表单将丢失所有值。我想知道CSS隐藏表单的一部分并在成功登录后使用JS显示表单的其余部分是否会更好。

这里有一些代码:

<form action="some_action.php">
    Email: <input type="text" name="email" id="email"> <br />
    Password: <input type="password" name="password" id="password"> <br />
    <button id="vrf_login">Verificar</button>
    <div id="rest_form">
    </div>
</form>  

阿贾克斯:- 检查登录:如果电子邮件和密码匹配,则- 加载 id 为"rest_form"的div 表单 (它位于另一个文件中,例如:

<input type="text" name="place" id="place">
<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit">

(

问题是如果我提交表单(没有 AJAX(并且存在错误,我将丢失加载 AJAX 的表单

编辑(再次(

谢谢大家的建设性建议:我采用的解决方案接近Alkis的第一个建议:

  • 几乎所有的表单都是隐藏的(CSS(

  • 经过一些逻辑选择后,表单(部分(变为可见(jQuery( - "记住"在提交失败的情况下哪些部分应该可见(服务器端验证(一些会话变量保存信息(AJAX( - 然后,在提交(失败(后使用 jQuery 恢复先前的表单结构(使用 JS 获取会话变量: var xpto = "<?php echo $_SESSION['prior_xpto']; ?>" ; (

  • 表单的字段将记住他们的值(使用 PHP(

您有 3 个选项。

  1. 停止通过 ajax 加载整个表单。用css隐藏它,如果满足条件,则显示它。如果页面在某些验证错误后显示,只需显示它(内联更改 css 或为其提供不同的类(
  2. 有一个条件,每次加载页面时检查它是否是第一次加载,或者页面是否在发生某些验证错误后显示。如果后者为真,则使用 ajax 再次加载表单。此条件可以是一个隐藏字段,它从服务器获取其值,并且每次提供页面时都会在客户端上检查它。
  3. 第二种解决方案也可以在服务器上完成。在服务器上检查条件。如果是第一次加载,则不要像现在这样填充表单并让它从 ajax 填充。如果是在验证错误之后,则预填充表单。这只是一个 if/else 子句。

请为您的问题提供一些代码,但我想您的问题是使用"提交"类型的按钮发送结果!

如果您有这样的表单:

 <form>
 <inputs ...>  
 <input type="submit" value="Send data" onclick="SendDataUsingAjax()" >
 </form>

单击提交后,无论您的 AJAX 函数正在做什么,输入上的所有值都将重置。 要解决此问题,您只需要将类型="提交"更改为类型="按钮"。