Отправка данных формы как при нажатии кнопки ввода, так и при нажатии кнопки отправки в модальном окне Bootstrap

Вот моя форма, которая находится в моем модальном окне:

У меня нет кнопки закрытия, и я отключил закрытие окна при нажатии клавиши esc. Я хочу иметь возможность отправлять данные формы при нажатии кнопки «Отправить» или при нажатии клавиши ввода.

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h3 id="myModalLabel">Enter your Credentials</h3>
    </div>
    <div class="modal-body">
        <form id="login-form" class="form-horizontal" accept-charset="UTF-8"  data-remote="true"">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="email" id="email" name="email" value=""  placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="passwd" name="passwd" value="" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                    <input type="submit"  id="login" value="Login"class="btn btn-primary" />

                </div>
            </div>
        </form>          
    </div>
</div>

Вот скрипт, который я использую:

$(document).ready(function(){
    $('#myModal').modal('show');
});

function submitLogin() {
    $.ajax({
        url:"login_mysql.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
        //do something
    });
}

$('#passwd').keypress(function(e) {
    if (e.which == '13') {
        submitLogin();
    }
});

$('#login').click(function(){
    submitLogin();
});

При нажатии клавиши ввода после ввода моего пароля или нажатия кнопки отправки та же страница перезагружается, а скрипт ajax - нет. запустить. Может кто-нибудь сказать мне, если мой скрипт конфликтует с настройками по умолчанию моего модального окна?

24
задан 18.05.2020, 19:30

3 ответа

Прослушайте событие формы submit - оно вызывается событиями ввода и нажатия.

Разметка

<form id="yourForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>

JS

$('#yourForm').submit(function(event){

  // prevent default browser behaviour
  event.preventDefault();

  //do stuff with your form here
  ...

});
31
ответ дан 18.05.2020, 19:31

Я сделал это, когда форма отправки откроется в модальном диалоговом окне и после этого отправит всю запись в полях. Если вы нажмете кнопку «Отправить», запись будет сделана в базе данных, и страница сразу же будет перенаправлена ​​на ту же страницу с новыми данными. Нет необходимости обновлять, чтобы увидеть последние введенные данные. Надеюсь, это поможет.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">ADD CONTENT</button>
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Please Add Content</h4>
        </div>
      <div class="modal-body">
        <form role="form" action="" method="POST">
          <!-- YOUR HTML FORM GOES HERE--->
        <button type="submit" name="submit" class="btn btn-primary btn-lg"id="sub" onclick="SUBMISSION()" >Submit </button>
        </fieldset>
        </form>
<?php
  if(isset(

Я сделал это, когда форма отправки откроется в модальном диалоговом окне и после этого отправит всю запись в полях. Если вы нажмете кнопку «Отправить», запись будет сделана в базе данных, и страница сразу же будет перенаправлена ​​на ту же страницу с новыми данными. Нет необходимости обновлять, чтобы увидеть последние введенные данные. Надеюсь, это поможет.

[110]

POST['submit'])) { SUBMISSION(); } function SUBMISSION() { // UR CONNECTION ESTABLISHMENT CODE GOES HERE // SQL QUERY FOR INSERTION IN FIELDS echo"<script type=\"text/javascript\"> document.location.href='http://localhost/dict/pages/YOURPAGE.php'; </script>"; $conn->CLOSE(); } ?> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 -->

0
ответ дан 18.05.2020, 19:30
  1. Измените type = "submit" с вашей кнопки входа на type = "button".

РЕДАКТИРОВАТЬ: 2. Попробуйте удалить data-keyboard = "false".

0
ответ дан 18.05.2020, 19:31
  • 1
    модальное отправляет данные по нажатию кнопки, но не по удару клавиши Enter. – Anon 18.05.2020, 19:31

Теги

Похожие вопросы