JQuery - AJAX dialog modal, can't hit enter key to submit form

Question

On a website I'm working on, when you click sign on, a jquery dialoge modal pops up, but you have to click on OK to submit the form, you can't just hit enter. I need it to be able to have enter work also. It seems like what I have should work, but it doesn't

I'm using jquery-1.3.2.js. I also have a php file with the following piece of code in it: `

  <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>`

i have a javascript file with the following function:

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");
    }
});

}

That is the code I have, I don't understand why it isn't working.

I also had it try $('#login_dialog').dialog('isOpen'); right after i opened it, but it always returned false oddly enough. Please help if you can.

Answer 1

I strongly recommend to consider all notes made by the others regarding raw client side SQL!

Regarding your actual question I propose the following: Put a form in your login dialog like so:

<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>

Then in your script part where the dialog is initialized write something like:

$('#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();
  }
});

With these preparations you can simplify your javascript a lot:

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

Some additional notes: Don't use SQL in your javascript. Instead write a customized php file with prepared sql to verify login data. In this solution the login form degrades gracefully if no javascript is present as it is a standard html form which can be sent by the browser. You should also be aware of the fact, that some browser send forms (i.e. trigger the submit handler) on Enter without further requirements, but as it's browser specific you cannot rely on this if it's a must for your application. As a last action you should eventually check whether you need to close the dialog manually within your "ResultOfLoginAttempt" method.