HTML表單 - 成功發佈表單但不離開頁面（NO-JQUERY）

Question

我在彈出窗口中有一個簡單的表單。在我的表單中，我只有一個帶複選框標籤的複選框。我所做的是當用戶點擊標籤或複選框時，提交按鈕出現，用戶將能夠提交表單。此外，我想當用戶按下提交按鈕收集我的數據庫中的信息，然後關閉彈出窗口並在網站上正常地繼續而不離開。我不知道如何實現，但這是我迄今爲止所做的。請爲此我需要一些幫助。

1）我想成功提交表單並將信息收集到我的數據庫中。 2）我想關閉彈出窗口。 3）我不想離開頁面。

謝謝。

HTML：

<div id="popUp"> 
     <form id="myform" method="post" action="somepage.php" onsubmit="return closeWindow"> 
     <input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br> 
     <input type="submit" id="submit-button" value="Submit" style="display:none"> 
    </form> 
    </div> 

CSS：

#popUp { 
    height:400px; 
    border:1px solid #000; 
    background:#e2e2e2; 
} 

JS：

var checkBox = document.getElementById("checkbox"); 
var submitButton = document.getElementById("submit-button"); 
var PopUpWindow = document.getElementById("popUp"); 

function checboxFunc() { 
    if (checkBox.checked) { 
     submitButton.style.display = "block"; 
    } else { 
     submitButton.style.display = "none"; 
    } 
} 
checkBox.addEventListener("click", checboxFunc); 


function closeWindow() { 
    PopUpWindow.style.display = "none"; 
    return false; 
} 
submitButton.addEventListener("click", closeWindow); 

Answer 1

阿賈克斯的發明來解決這個問題。 jQuery的包裝好聽喜歡：

結賬$.post

兩個建議，如果你正在做這種類型的請求，不使問題複雜化，並使用FORM標籤，只需使用的輸入。 其次發送JSON而不是表單數據，可能會混亂嘗試獲取正確的格式。

所以，你的客戶端會是這個樣子：

 



    var req_obj = { 
     "id":"ENTER_DATA", 
     "params":{ 
      "param_name1":"param_val1", 
      "param_name2":"param_val2" 
     } 
    }; 

    $.post(
     APP.ActionUrl, 
     JSON.stringify(req_obj), 
     function(data){ //this is the callback,do your confirmation msg }, 
     "json"); 

SERVER：

 


    $req_obj = json_decode(get_post_data()); 
     $param1 = $req_obj->params->param_name1; 


     function get_post_data(){ 
      $buf = ''; 

      if(($h_post = fopen('php://input','r'))){ 
       while(!feof($h_post)) 
        $buf .= fread($h_post,1024); 

       fclose($h_post); 
       return $buf; 
      } 
      else 
       return false; 
     } 

Answer 2

雖然可以使用AJAX，一個簡單的方法是把形式在另一個HTML文件將其加載到iframe中並設置表格的target="name_of_iframe"。

您還必須擺脫onsubmit屬性，並添加一個事件偵聽器。像這樣。

yourpage.html

<iframe id="popUp" name="popup" src="path/to/form.html"></iframe> 

form.html

<form id="myform" method="post" action="somepage.php" target="popup"> 
    <input type="checkbox" id="checkbox" name="checkbox"><label for="checkbox">Click to show Submit</label><br> 
    <input type="submit" id="submit-button" value="Submit" style="display:none"> 
</form> 

yourpage.js

var checkBox = document.getElementById("checkbox"); 
var submitButton = document.getElementById("submit-button"); 
var PopUpWindow = document.getElementById("popUp"); 
var form = document.getElementById("myform"); 

function checboxFunc() { 
    if (checkBox.checked) { 
     submitButton.style.display = "block"; 
    } else { 
     submitButton.style.display = "none"; 
    } 
} 
checkBox.addEventListener("click", checboxFunc); 


function closeWindow() { 
    PopUpWindow.style.display = "none"; 
    return false; 
} 
form.addEventListener("submit", closeWindow); 

當是這種SUBM那麼somepage.php會加載，但只有在彈出窗口內，無論如何都會隱藏。所以你會有想要的效果。