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

虽然您可以使用 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);

提交后，somepage.php 将加载，但仅在弹出窗口内，无论如何都会隐藏。这样你就会得到想要的效果。

Answer 2

Ajax 就是为了解决这个问题而发明的。 Jquery 很好地包装了它：

结帐$.post

两个建议，如果您正在执行此类请求，请不要使事情复杂化并使用 FORM 标签，只需使用输入即可。 其次发送 JSON 而不是表单数据，尝试以正确的格式获取可能会很麻烦。

所以你的客户端看起来像这样：

var req_obj = { "id":"ENTER_DATA", “参数”：{ "param_name1":"param_val1", “param_name2”：“param_val2” } }; $.post( APP.ActionUrl, JSON.stringify(req_obj), function(data){ //这是回调，做你的确认消息}， “json”）；

服务器：

$req_obj = json_decode(get_post_data()); $param1 = $req_obj->params->param_name1; 函数 get_post_data(){ $buf = ''; if(($h_post = fopen('php://input','r'))){ 而（！feof（$h_post）） $buf .= fread($h_post,1024); fclose($h_post); 返回 $buf; } 别的 返回假； }