在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

Posted 2023-02-22

【中文标题】在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

【英文标题】：Submit form data both on clicking enter and hitting the submit button from a Bootstrap modal window

【发布时间】：2013-10-18 07:36:00

【问题描述】：

这是我的模态窗口中的表单：

我没有关闭按钮，并且我禁用了按 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();
);

在输入我的密码或单击提交按钮后按 Enter 键，相同的页面会重新加载，并且 ajax 脚本不会运行。有人可以告诉我我的脚本是否与我的模态窗口的默认设置发生冲突吗？

【问题讨论】：

将 type="submit" 从您的登录按钮更改为 type="button"

【参考方案1】：

我已经做到了，提交表单将在模式对话框中打开，然后在字段中提交整个条目。如果您单击提交按钮，将在数据库上完成输入，并立即将页面重定向到包含新数据的同一页面。无需刷新即可查看最近输入的数据。 希望这会有所帮助。

<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($_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 -->

【讨论】：

你能再解释一下你的答案吗？很难理解你在这里写的内容。

yaa of course..但这并不难理解。我使用引导模式打开提交表单，提交单击按钮后，您可以看到即时填充的数据。首先我在模态框 div 之后定义了按钮，在模态正文中我定义了单击“添加内容按钮”后将在模态框上显示的表单

填写完所有数据后，您单击提交按钮，然后在执行 SUBMISSION() 时，首先数据将保存在数据库中，然后使用 document.location.href 您将重定向到您可以的数据表页面查看最近填充的数据。执行起来超级简单

简单来说，我在模态正文中定义了所有表单字段，并在 php 中执行提交，如您所见

【参考方案2】：

将 type="submit" 从您的登录按钮更改为 type="button"。

编辑： 2. 尝试删除 data-keyboard="false"。

【讨论】：

模式在点击按钮时提交数据，而不是在按下回车键时提交数据。

【参考方案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
  ...

);