PHP+JQuery+AJAX 表单未使用不同的值重新提交答案

【问题标题】：PHP+JQuery+AJAX Form not getting resubmitted with different valuesPHP+JQuery+AJAX 表单未使用不同的值重新提交
【发布时间】：2015-02-04 14:34:18
【问题描述】：

这很尴尬，但我似乎无法弄清楚为什么我的表单在更改值后不会重新发布。

为了更清楚，我有这个密码恢复表单，用户可以在其中输入电子邮件地址。表单通过 AJAX 在 PHP 中处理，并在表单页面上显示验证/成功消息。

这里的问题是，如果用户输入了无效的电子邮件地址，它会显示错误消息，但如果用户随后更正了电子邮件地址并尝试再次提交，它不会处理输入，除非页面是显式刷新（在这种情况下，它会显示非常烦人的重新提交警告）。是否有一些属性可以设置表单并且需要通过代码“取消设置”？我该如何改善这种体验？我已经发布了下面的代码。

<form id="pwd_rec_form" method="post" action="">
          <div class="row">
              <div  class="large-6 columns">
                  <input type="email" required placeholder="Email ID" name="email"/>
              </div>
          </div>
          <div id="val_msg" class="row"></div>
          <div class="row">
              <div  class="large-6 columns">
                  <input id="submit_button" type="submit" value="Send" class="button"/>
              </div>
          </div>
          <div class="row">
              <div  class="large-6 columns">
                  <a href="index.php">Back to login page</a>
              </div>
          </div>
        </form>

<script>
     $(function()
     {
        $("#pwd_rec_form").submit(function()
        {
          var formdata = $(this).serializeArray();

          var hideMsg = function() {$("#val_msg").hide()};

          //alert (dataString);return false;
          $.ajax({
            type: "POST",
            url: "recover-password.php",
            data: formdata,
            success: function(res)
            {
              $('#val_msg').html(res);
              setTimeout(hideMsg, 5000);
            }
          });

          $("#pwd_rec_form").trigger("reset");
          return false;
        });
     });
</script>

PHP：

<?php
  include 'db-connect.php';

  if($_SERVER["REQUEST_METHOD"] == "POST")
  {
$conn = getDBConnection();

// Check connection
if (mysqli_connect_errno())
{
    echo('  <div data-alert class="alert-box secondary">' . mysqli_connect_error() . '
            </div>'
        );
    exit();
}

$eID = mysqli_real_escape_string($conn, trim(strip_tags($_POST['email'])));

$query = 'SELECT password FROM member_login WHERE email_id = "' . $eID . '";';

$result = mysqli_query($conn, $query);

if($result == FALSE)
{
    echo('  <div data-alert class="alert-box secondary">' . mysqli_error($conn) . '
            </div>'
        );
}
else
{
  if(mysqli_num_rows($result) == 0) // User not found.
  {
      echo('<small class="error">This email address is not registered with us.</small>');
  }
  else
  {
    $pswd = mysqli_fetch_assoc($result);

    //mail the pswd

    echo('  <div data-alert class="alert-box success">
                Your password has been successfully sent to your registered email address.
            </div>'
        );

    /* free result set */
    mysqli_free_result($result);
  }
}

mysqli_close($conn);
  }
?>

【问题讨论】：

标签： php jquery html ajax forms

【解决方案1】：

我认为您的问题是您有一个提交按钮，该按钮会自动提交表单并刷新页面，因此您的 javascript 不会被使用。尝试将您的提交按钮设置为type="button"，然后将您的 jQuery 更改为$("#pwd_rec_form").click(function()，看看是否可行。

【讨论】：

【解决方案2】：

您可以挂钩表单提交，或者如果您愿意，您可以挂钩提交按钮的点击事件，阻止默认操作，而是执行您的 javascript 代码。这是一个挂钩“submit_button”点击事件的示例：

$(document).ready(function() {
      $("#submit_button").click(function(e) {
             e.preventDefault();
             // Do your ajax stuff
      });
});

您也可以这样做：

$(document).ready(function() {
      $(form).submit(function(e) {
             e.preventDefault();
             // Do your ajax stuff
      });
});

上面的代码只是在提交请求上钩住了表单，阻止了默认操作，然后你把你的 ajax 代码放在那里。

【讨论】：

【解决方案3】：

感谢你们的帮助。我知道这很愚蠢。原来表单正在处理，但验证/成功消息没有显示为我在第一次提交期间使用 javascript 隐藏的 div 元素，需要再次显示以进行第二次尝试！

【讨论】：

【解决方案4】：

你可以试试这个：

<script>
$(document).ready(function(){
    $('#pwd_rec_form').on('submit', function(e){
    e.preventDefault();
    // insert AJAX call
});

它对我有用，每次点击都会触发该事件。

最好的问候，

【讨论】：