Javascript HTML表单-成功发布表单但不离开页面（NO-JQUERY）

我在弹出窗口中有一个简单的表单。在我的表格中，我只有一个带有复选框标签的复选框。我所做的是，当用户单击标签或复选框时，将显示提交按钮，用户将能够提交表单。此外，我想当用户按下提交按钮，收集我的数据库中的信息，然后关闭弹出窗口，继续在网站上正常不离开。我不知道如何做到这一点，但这是我迄今为止所做的。我需要一些帮助来实现这一点

1） 我想成功提交表单并将信息收集到我的数据库中。 2） 我想关闭弹出窗口。 3） 我不想离开这一页

谢谢

HTML:

JS:

---

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

签出

$。发布

两个建议，如果你正在做这种类型的请求，不要把事情复杂化，使用表单标签，只使用输入。
其次，发送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");
var req_obj={
“id”：“输入数据”，
“参数”：{
“参数名称1”：“参数值1”，
“参数名称2”：“参数值2”
}
};
美元邮政(
APP.ActionUrl，
JSON.stringify（req_obj），
函数（数据）{//这是回调，请确认消息}，
“json”）；
服务器：

$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;
        }
$req_obj=json_decode（get_post_data（））；
$param1=$req_obj->params->param_name1；
函数get_post_data（）{
$buf=''；
如果（$h_post=fopen（$h）php://input","r")){
而（！feof（$h_post））
$buf.=fread（$h_post，1024）；
fclose（h_员额）；
返回$buf；
}
其他的
返回false；
}
尽管可以使用AJAX，但更简单的方法是将表单放入另一个HTML文件中，并将其加载到
iframe
中，然后设置表单的
target=“name\u of_iframe”

您还必须去掉onsubmit属性，而是添加一个事件侦听器。像这样

yourpage.html

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

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

提交此文件时，将加载
somepage.php
，但仅在弹出窗口内，该窗口仍将隐藏。因此，您将获得所需的效果。
至少，您应该尝试自己编写代码。之后，如果你有问题，你可以张贴你已经尝试了一个明确的解释什么是不工作，并提供一个解决方案。我建议你读一个好的问题和答案。另外，一定要带上这本书并仔细阅读。你可能的副本并没有说明你到目前为止取得了什么成就，你到底需要什么帮助？谢谢你的回答@JasonSingh。当我单击submit按钮时，它会将我带到somepage.php，弹出窗口似乎不会关闭。有一个简单的解决方案可以解决您的问题，它有两个步骤：1）使用e.preventDefault（）避免网站重定向。2） 使用ajax将表单发送到sql server。谢谢@Abraham Murciano。我已经尝试过你的解决方案，但是当我呈现页面时，我看不到任何东西。我只是检查了一下，显然，你不能将HTML直接放入iFrame中。你需要另存一个文件。我会更新答案的。谢谢@Abraham Murciano Benzadon。我已经检查过了，但我不确定它是否有效。它不会离开页面，但iframe仍然存在。它不会消失，我明白了。这是因为没有在iframe中定义closeWindow函数。只有外面。我现在更新答案。谢谢@Yogistra Anderson的回答。你的答案可能有用，但我想要一个简单的解决方案。
$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;
        }
<iframe id="popUp" name="popup" src="path/to/form.html"></iframe>

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

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