JQuery - модальное диалоговое окно AJAX, не удается нажать клавишу ввода для отправки формы

Question

На веб-сайте, над которым я работаю, когда вы нажимаете кнопку «Войти», появляется диалоговое окно jquery Dialoge, но вы должны нажать «ОК», чтобы отправить форму, вы не можете просто нажать «Enter». Мне нужно, чтобы у меня была возможность работать. Кажется, что у меня должно работать, но это не

Я использую 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'); сразу после того, как я его открыл, но он всегда возвращался как ни странно. Пожалуйста, помогите, если можете.

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

Некоторые дополнительные примечания: Не используйте SQL в своем JavaScript. Вместо этого напишите настроенный php-файл с подготовленным sql для проверки данных для входа. В этом решении форма входа в систему изящно ухудшается, если отсутствует javascript, поскольку это стандартная форма HTML, которую можно отправить браузером. Вам также следует учитывать тот факт, что некоторые браузерные формы отправки (т. Е. Запускают обработчик отправки) на Enter без дополнительных требований, но поскольку это зависит от браузера, вы не можете полагаться на это, если это необходимо для вашего приложения. В качестве последнего действия вы должны в конечном итоге проверить, нужно ли вам вручную закрывать диалоговое окно в вашем методе ResultOfLoginAttempt.

Answer 2

Посмотрите на плагин Tamper для Fire Fox: Данные тампера 10.1.0 Генерировать SQL на стороне клиента плохо. Вы можете захватить HTTP-запрос.

Answer 3

Я думаю, что вы имеете в виду if (e.keyCode == 13) {, а не if (e.which == 13) {.

Также Ян Эллиот прав. Вы никогда не должны иметь фактический sql в качестве какой-либо части вашего javascript или какой-либо части вашей формы. Вы можете отправлять на сервер значения, которые в конечном итоге будут интерполированы в ваш SQL *, но не полный SQL.

* Как только значения были должным образом проверены, санированы и, необязательно, прошли через другой уровень абстракции (например, MVC).