如何让我的表单发布到自己答案

【问题标题】：How to make my form post to its self如何让我的表单发布到自己
【发布时间】：2014-07-02 17:33:10
【问题描述】：

我有一个用户可以提交问题的表单，我希望当用户点击添加按钮时，我希望他们添加的内容发布在下面的框中。所以说添加一些东西，x out the window 然后回来添加其他东西，他们之前添加的东西仍然存在。

这是我的小提琴 http://jsfiddle.net/grahamwalsh/rCB9V/

问题列表(html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />

</head>
<body>
<div class='issuelist'>

    <form data-bind="submit:addIssue">
        Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
    </form>

    <p>Your Issues:</p>
    <select multiple="multiple"  data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>

    <div>
        <button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
        <button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
    </div>

</div>
</body>
</html>

问题列表 (js)

$(document).ready(function(){
var Issuelist = function () {
    this.issueToAdd = ko.observable("");
    this.allIssues = ko.observableArray(["test"]);
    this.selectedIssues = ko.observableArray(["test"]);

    this.addIssue = function () {
        if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
            this.allIssues.push(this.issueToAdd());
        this.issueToAdd("");
    };

    this.removeSelected = function () {
        this.allIssues.removeAll(this.selectedIssues());
        this.selectedIssues([]);
    };

    this.sortIssues = function () {
        this.allIssues.sort();
    };
};


ko.applyBindings(new Issuelist());
});

问题列表css

body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }

【问题讨论】：

我认为您可能希望使用数据库来存储非易失性数据。
数据库将是解决这种情况的方法..
如果数据应该只呈现给当前用户（留在浏览器中，而不是通过 HTTP 传输），请查看 HTML5 localStorage 或 Web SQL。如果数据应该提供给其他用户，您将需要一些服务器端处理和数据库存储。
Web Storage API (localStorage/sessionStorage) 不能满足您的需求吗？
本地存储见stackoverflow.com/questions/2010892/…，仅限客户端

标签： javascript jquery html http-post

【解决方案1】：

您可以将表单“发布”到其自身，然后为他们的新问题发出 ajax 请求并将其放入 div 中。我也会在 javascript 上推迟这么多，或者支持那些没有它的人：

getissues.php

getissues.php




<?php
/*
connect to your database code
*/

$query = "select * from issues";


$result = mysql_query($query, $connect);


while($row = mysql_fetch_array($result))
{
echo $row['issues'];
echo '<hr>';
}
?>

进程.php

process.php:



<?php
/*
connect to your database
*/


$issue = strip_tags$_POST['issue'];


$query = "insert into issues (issue) values ('$issue')";


$result = mysql_query($query, $connect);
?>

主表单页面：

<!DOCTYPE HTML>
<html>
<head>
<title>issue page</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
<script type="text/javascript">

function check()
{
var request = $.ajax({
                        url: "getissues.php",
                        type: "POST",            
                        dataType: "html"
                    });

                    request.done(function(msg) {
                        $("#issues").html(msg);          
                    });

                    request.fail(function(jqXHR, textStatus) {
                        alert( "Request failed: " + textStatus );
                    });    
}





function validate()
{
var issue = $("#issue");
var errcount = 0;

if (issue == "")
{
errcount++;
alert("enter something");
}

if (errcount == 0)
{
/*
make request to php script to put issue into database
*/


$.post("process.php",
    {
      issue:issue
    },
    function(data,status){
    window.alert("Request done!");
    check();
    });      
}




}
</script>
</head>
<body>
<form action="issuelist.html" method="post">

Add Issue: <input type="text" name="issue"/>

Add Issue: <input type="text" name="issue" id="issue"/>
<button onclick="validate()">submit</button>
</form>



<div id="issues" class="issues">
<!--your ajax fetched issues will appear here-->

</div>



</body>
</html>

希望这会有所帮助！

【讨论】：