javascript - JQuery - AJAX 对话框模式，无法按回车键提交表单

Question

在我正在处理的网站上，当您单击登录时，会弹出一个 jquery 对话框模式，但您必须单击确定才能提交表单，您不能直接按回车键。我也需要它才能进入工作。看起来我所拥有的应该可以工作，但它没有

我正在使用 jquery-1.3.2.js。我还有一个包含以下代码的 php 文件:`

  <tr valign="top" align="right" style="height:40px"><td >

    <div id="signin">

      <table style="margin-top:4px;margin-right:4px;border-style:solid;border-width:1px">

        <tr><td style="width:165px;">  

            <div><center>

            <a title="Sign In" onclick="LoginDialogOpen()" href="javascript:void();">Sign In</a><b>&nbsp;&nbsp; | &nbsp;&nbsp;</b>

            <a title="Create Account" href="CreateAccount.html">Create Account</a>

            </center></div>  

        </td></tr>

      </table>

    </div>

  </td></tr>

    <div id="Signin_Dialog" >

    <div id="bg">

    <label><span>Email:</span></label>

    <input type="text" name="email" id="email" class="dialog-input-text"/>

    <br>



    <label><span>Password:</span></label>

    <input type="password" name="password" id="password" class="dialog-input-text"/>

    <br>

    <br>

    <center><b><label id="login_error" style="color:red"><span>&nbsp;</span></label></center></b>



  </div>

</div>



<script>

    $('#login_dialog').dialog({

        autoOpen: false,

        width: 310,

    overlay: { opacity: 0.5, background: "black" },

  modal: true,

        buttons: {

            "Ok": function() { 

      $("body").addClass("curWait");                

      sql = "select client_id from users where email = '" + $("#email")[0].value + "' and login_password='" + $("#password")[0].value + "'";

      $.get('BongoData.php', { task:"SQLResultToJSON", sql: sql}, ResultOfLoginAttempt, "json");

            }, 

            "Cancel": function() { 

                $(this).dialog("close"); 

            } 

        }

    });


</script>`

我有一个具有以下功能的 javascript 文件:

function LoginDialogOpen(){

  $('#login_dialog').dialog('open');
  $('#login_dialog').keypress(function(e) {
    if (e.which == 13) {
      $("body").addClass("curWait");                

      sql = "select client_id from users where email = '" + $("#email")[0].value + "' and login_password='" + $("#password")[0].value + "'";

      $.get('BongoData.php', { task:"SQLResultToJSON", sql: sql}, ResultOfLoginAttempt, "json");
    }
});

这是我的代码，我不明白为什么它不起作用。

我也尝试过 $('#login_dialog').dialog('isOpen');就在我打开它之后，但它总是奇怪地返回 false。如果可以，请帮忙。

Answer 1

我强烈建议考虑其他人关于原始客户端 SQL 的所有注释!

关于您的实际问题，我提出以下建议:在您的登录对话框中放置一个表单，如下所示:

<div id="login_dialog">
  <form method="get" action="BongoData.php">
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="submit" />
  </form>
</div>

然后在初始化对话框的脚本部分编写如下内容:

$('#login_dialog').dialog({
  autoOpen: false,
  width: 310,
  overlay: { opacity: 0.5, background: "black" },
  modal: true,
  buttons: {
    "Ok":     function() { $('#login_dialog form').submit(); },
    "Cancel": function() { $(this).dialog("close"); } 
  }
});

// hide the original submit button if javascript is active
$('#login_dialog form input[type=submit]').hide();
// register a submit handler to submit the form asynchronously
$('#login_dialog form').submit(function () {
  // calling serialize() on a form transforms form inputs to a string suitable for $.get and $.post
  $.get($(this).attr('action'), $(this).serialize(), ResultOfLoginAttempt, "json");
  // prevent that the browser submits the form.
  return false;
});
// and register a key listener to submit the form if the user presses enter on the password input field
$('#login_dialog form input[type=password]').onKeyDown(function (e) {
  if (e.which == 13) {
    // just trigger the submit handler
    $('#login_dialog form).submit();
  }
});

通过这些准备，您可以大大简化您的 javascript:

function LoginDialogOpen(){
  $('#login_dialog').dialog('open');
}

一些补充说明:不要在你的 javascript 中使用 SQL。而是用准备好的 sql 编写一个自定义的 php 文件来验证登录数据。在此解决方案中，如果不存在 javascript，则登录表单会正常降级，因为它是可以由浏览器发送的标准 html 表单。您还应该意识到这样一个事实，即某些浏览器会在没有进一步要求的情况下在 Enter 上发送表单(即触发提交处理程序)，但由于它是特定于浏览器的，如果您的应用程序必须这样做，您不能依赖它。作为最后一项操作，您最终应该检查是否需要在“ResultOfLoginAttempt”方法中手动关闭对话框。