How to make my form post to its self

Question

I have a form in which users can submit issues, what I want to happen is when users hit the add button, i want what they add to be posted in the box below. So say the add something, x out the window and come back to add something else later what they added previously will still be there.

here is my fiddle 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; }

I think you may want to use a database to store that non-volatile data. — arielnmz, Jul 02 '14 at 17:35
If the data should only be present to the current user (stay inside the browser, not be transfered over HTTP), have a look at the HTML5 `localStorage` or Web SQL. If the data should be present to other users, you will need some server side processing and database storage. — ConcurrentHashMap, Jul 02 '14 at 17:35
Wouldn't the Web Storage API (localStorage/sessionStorage) fit your needs? — Kovács Imre, Jul 02 '14 at 17:37
See http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage for the local storage, for client-side only — Jb Drucker, Jul 07 '14 at 12:18

score 0 · Answer 1 · answered Jul 07 '14 at 15:07

You could have the form 'post' to its self then make an ajax request for their new issue and put it inside a div. I would also hold off on so much on the javascript or have support for those without it:

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

main form page:

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

hope this helps!

How to make my form post to its self

1 Answers1