如何使工作PHP的形式为模式

我有一个形式，这个HTML代码在模式（使用引导程序）如何使工作PHP的形式为模式

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

的问题是，当我点击“确定”按钮后，没有按什么都不会发生。这是“test.php的”文件（我只用了，看看它是否工作）

<html> 
    logged 
</html>

我是新的引导，所以我不太清楚，为什么它不作为通常的HTML工作+ CSS页面。谢谢你的帮助！

编辑

我发现这个AJAX代码，试图把它addapt到我的代码，但仍然没有奏效。现在，我只想在按下按钮后去另一个PHP页面（我还没有编码登录验证）。

来源

2015-10-20 user3587175

显示处理表单的实际PHP代码，并显示处理表单的'submit'事件的任何JS代码。如果你想要一个模式表单提交的东西，你可能会想要处理提交事件，取消提交并执行AJAX调用。 PS：你不需要那个'action =“test.php”'属性：默认情况下表单提交到当前网址 –

对不起，我还不清楚，已经编辑过我的帖子。我之前没有工作过AJAX，所以我不确定我添加的代码是否正确。谢谢你的答案！ – user3587175

你应该真的开始一步一步地尝试，而不是清楚地了解基本知识，就会把事情推下去。这是更好地进步慢，但比快速稳定和间歇 – Onilol

我看到发生了什么，只是添加此

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

来源

2015-10-20 12:32:29

你怎么能_“看看发生了什么”_？ OP没有发布任何JS代码，他也没有展示PHP代码，大概是，处理形式 –

对不起，我编辑了这个问题的更多细节。这不是我想要做的，但仍感谢您的帮助！ – user3587175

@Elias当我发布我的答案时，没有JavaScript ...我很抱歉。 –

你的问题的最明显的部分是，当你执行一个AJAX调用，找你实际上没有阻止从形式提交。您不想提交页面，而是等待ajax请求结束，并在成功回调中处理响应。由于您使用jQuery的，做到这一点的最简单的方法是从事件回调返回false：

$(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"); 
        } 
       }); 
       return false;//stop form submission 
      }); 
     });

jQuery的return false是香草JS的等效：

eventObj.preventDefault();//do not handle event in a normal fashion 
eventObj.stopPropagation();//do not propagate event to other handlers

话虽如此，您的选择器和事件绑定可能会更好，我会为表单设置一个ID（<form id='modalformid'>），并绑定提交事件（可以由用户按enter触发），然后像下面这样绑定处理程序：

$('#modalformid').on('submit', function() 
{ 
    var frm = $(this);//reference to the form that is submitted 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data: frm.serialize(),//serialize correct form 
     success: function(msg) { 
      //the response from the server is in msg here! 
      $("#form-content").modal('hide'); 
     }, 
     error: function(){ 
      alert("failure"); 
     } 
    });//your ajax call here 
    return false; 
});

我还检查控制台，以确保您在内的所有JS依赖（比如jQuery的）之前你打电话$(document).ready()和名称冲突仔细检查（在控制台console.log($)和console.log($ === jQuery)）。
最后，$('form.login_form')选择器不可靠：ID的定义是唯一的。类不是。理论上使用$('form.login_form')可以匹配多个表单。经验法则：如果要处理单个表单/元素，则类对于CSS规则很有用，而不是JS事件处理（委派支持）的用处很多：使用ID。

来源

2015-10-20 12:48:49

没有工作:(我也删除了“行动”和“方法”属性，形成形式的代码，但仍然没有奏效。我添加了必需的引导脚本后

如何使工作PHP的形式为模式

回答

相关问题