如何使工作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的形式爲模式

回答

相關問題