Question

我有一个用户可以提交问题的表单，我想要发生的是当用户点击添加按钮时，我希望他们添加的内容发布在下面的框中。所以说添加一些东西，x在窗口外面，然后回来添加其他东西，之后他们添加的内容仍然会在那里。

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

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

IssueList（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());
});

IssueListcss

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

Answer 1

您可以使用表格＆＃39; post＆＃39;为了自己，然后为他们的新问题提出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>';
}
?>

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

希望这有帮助！

如何使我的表单发布到自己

1 个答案: