关于javascript：HTML表单 – 成功发布表单但不离开页面(NO-JQUERY)


HTML Form - successfully post form but do not leave the page (NO-JQUERY)

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

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

谢谢。

HTML：

1
2
3
4
      <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>
         <input type="submit" id="submit-button" value="Submit" style="display:none">
     </form>

CSS：

1
2
3
4
5
#popUp {
    height:400px;
    border:1px solid #000;
    background:#e2e2e2;
}

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
相关讨论

虽然您可以使用AJAX，但更简单的方法是将表单放在另一个HTML文件中并将其加载到iframe中并设置表单的target="name_of_iframe"。

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

yourpage.html

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

form.html

1
2
3
4
<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>
    <input type="submit" id="submit-button" value="Submit" style="display:none">
</form>

yourpage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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将加载，但只在弹出窗口内，无论如何都会被隐藏。 所以你会有所期望的效果。

相关讨论

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

结帐$.post

两个建议，如果你正在做这种类型的请求，不要使问题复杂化并使用FORM标签，只需使用输入。
其次发送JSON而不是表单数据，可能是凌乱的尝试以正确的格式。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    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");

服务器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    $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;
        }
相关讨论