dota220141003 2015-10-20 12:26
浏览 43

如何使PHP表单工作成模态

I have this HTML code for a form in a modal (using Bootstrap)

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">


          <form name="login_form" action="test.php" method="post" role="form">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">                  
                      <label for="email">Email:</label>
                      <input type="email" class="form-control" id="email" placeholder="Enter email">                  
                </div>

                <div class="form-group">
                      <label for="pwd">Password:</label>
                      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
            </div>

            <div class="modal-footer">
                <input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary">
            </div>

          </form>

      </div>

    </div>
</div>

The problem is that when I click on the "ok" button, doesn't happen anything. This is the "test.php" file (which I only used to see if it worked)

<html>
    logged
</html>

I'm new in bootstrap so I'm not quite sure about why it does not work as an usual HTML+CSS page. Thanks for your help!

EDIT

I found this AJAX code, tried to addapt it into my code but still didn't work.

$(document).ready(function () {
            $("input#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "test.php", // 
                    data: $('form.login_form').serialize(),
                    success: function(msg){
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("failure");
                    }
                });
            });
        });

By now, I just want to go to another PHP page after pressing the button (I haven't coded the login validation yet).

  • 写回答

2条回答 默认 最新

  • doulanyan6455 2015-10-20 12:32
    关注

    I see what is happening, just add this

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
    <script>
        $(document).ready(function(){
    
        $('#submit').click(function(){
    
          $('#loginModal').modal('show'); 
        });
    
    </script>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开,官网首页进不去,显示无法访问此页面,求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf(“\b \b”)与getch()实现黑框里写入与删除?
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题,求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
  • ¥15 有了解d3和topogram.js库的吗?有偿请教