保存表单的文本字段数据并将其重置为空白答案

【问题标题】：Saving a form's text field data and resetting it to be blank保存表单的文本字段数据并将其重置为空白
【发布时间】：2014-04-05 08:48:09
【问题描述】：

因此，对于 Web 应用程序，我需要使用 HTML/PHP/MySQL 编写一个新用户表单。用户表单的要求包括：

给自己发帖
有用户名、密码和确认密码文本字段
具有重置所有字段的重置按钮
如果两个密码字段不匹配，报错，重置表单，保留用户名
如果用户名已经被占用，报错并重置一切
如果一切正常，对密码进行哈希和加盐，将数据添加到数据库，报告成功，然后重置表单

我目前正在处理#3 和#4。这是我目前所拥有的（对不起，如果代码难以阅读）：

<form name="form" method="post" action="NewUser.php">

User Name: <input name="userName" type="text" id="userName" value="<?php echo $_POST["userName"]; ?>"> <br>
Password:  <input type="password" name="password" id="password"> <br>
Confirm:   <input type="password" name="passwordConfirm" id="passwordConfirm">
<?php
    if ($_POST["password"] != $_POST["passwordConfirm"]) {
        echo "Error: Passwords do not match.";
    }
?> <br>
<input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset">
</form>

现在，如您所见，由于 userName 的默认值发生了变化，如果用户未通过密码检查然后尝试重置表单，重置按钮实际上并不会清空文本字段。

除了我可能会在实施其余要求时遇到的未来问题之外，我将如何解决我目前遇到的这个问题？

【问题讨论】：

添加你的脚本函数，用于检查字段，以便我们预测错误
嘿哥们试试JQUERY 进行验证...它将提供简单的验证..
如果你建议他使用客户端验证而不是服务器端，那么你提供了一些非常糟糕的建议。

标签： php forms reset

【解决方案1】：

<input type="reset"> 将表单重置为加载时的状态。

如果您坚持使用 PHP，则需要将类型更改为 submit 并通过 if (isset($_POST["reset"])) 检查用户是否要重置表单。

或者你使用 Javascript：<input type="reset" onclick="document.getElementById('username').value='';" />

【讨论】：

【解决方案2】：

你必须有两个文件..

index.html 
savedata.php

现在您可以通过 jQuery、AJAX 将表单数据从 index.html 发送到 savadata.php。只需按照这些步骤。将此脚本添加到您已经创建的 index.html 中。

  <script>
jQuery(function(){
   $('form').submit(function(e) {
      e.preventDefault();
      var username  = $("#userName").val();
      var password  = $("#password").val();
      var cPassword = $("#passwordConfirm").val();
// i am validating confirm password on client side but don't do it for security reasons
      if(password == cPassword) {

        // now send the Form Data to Server Side to save theme 
         $.post('savadata.php', {
            username:username,
            password:password  
         } , function(responce){
              if(responce == '1') {
               // form submitted successfully
                  // clear form fields 
                  $("#userName").val('');
                  $("#password").val('');
                  $("#passwordConfirm").val('');
                   alert('Data Saved...');
               } else {
                alert('there is an error to save data');
               }
          })

    } else {
      alert('Confirm password not matched');
    }
   }
});
</script>

savedata.php 将接收 $_POST 数组中的数据你可以这样对待主题。

<?php
$username = $_POST['username'];
$password = md5($_POST['password']);
// Do what ever you want with savadata.php
// if Data Saved Successfuly echo '1'; javascript will take this flag as your data is saved.
?>

【讨论】：