JQuery - AJAX对话模式,无法按Enter键提交表单

时间:2009-07-11 08:03:26

标签: javascript jquery ajax jquery-ui enter

在我正在处理的网站上,当您点击登录时,会弹出一个jquery dialoge模式,但您必须单击确定才能提交表单,您不能只是按回车键。我需要它才能进入工作。看起来我应该工作,但它不是

我正在使用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');我打开它之后,它总是奇怪地返回错误。如果可以,请帮忙。

3 个答案:

答案 0 :(得分:3)

我强烈建议考虑其他人关于原始客户端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”方法中手动关闭对话框。

答案 1 :(得分:0)

我认为您的意思是if (e.keyCode == 13) {而不是if (e.which == 13) {

Ian Elliot也是对的。您永远不应该将实际的sql作为javascript的任何部分或表单的任何部分。您可以向服务器提交最终将插入到SQL *中的值,但绝不会提供完整的SQL。

*一旦价值得到适当验证,消毒,&amp;可选地通过另一个抽象层(想想MVC)。

答案 2 :(得分:0)

查看Fire Fox的Tamper插件:Tamper Data 10.1.0 在客户端生成SQL是不好的。你可以劫持http请求。