CODEWITHSUNDEEP
javascripthtml
user1854373
user1854373

Reputation: 83

How to prevent a dynamically added element from disappearing after page reload.

I have the following code which generates a div element in the html when i click the submit button. The div element gets generated successfully, but problem is when i refresh the page it disappears, how to make it stay there even when the page is refreshed later.

My purpose is i want user to add comments on my page. So i want comments to stay on the page.

<script type="text/javascript">

    function myfunction(){

        var name=document.forms["myform"]["name"].value;
        var comment = document.forms["myform"]["comment"].value;

        var div=document.createElement("div");
        var text=document.createTextNode(name+" commented "+comment);
        div.appendChild(text);

        document.body.appendChild(text);

    }

</script>

<body>
    <form name="myform">
        Name: <input type="text" name="name"/>
        <br>

        Comment: 
        <textarea rows="4" cols="50" name="comment">
        </textarea>
        <input type="button" value="submit" onclick="myfunction()"/>

    </form>


</body>
<div id = "com"></div>

Upvotes: 2

Views: 4926

Answers (2)

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

You can use javascript cookies:

Fiddle

html:

<form name="myform">Name:
    <input type="text" name="name" />
    <br>Comment:
    <textarea rows="4" cols="50" name="comment"></textarea>
    <input type="button" value="submit" onclick="myfunction()" />
    <div id="com"></div>
</form>

javascript: 

document.addEventListener("DOMContentLoaded", check, false);

function check() {
    if (checkCookie("name")) {
        var name = document.forms["myform"]["name"].value;
        var comment = document.forms["myform"]["comment"].value;
        var div = document.createElement("div");
        var text = document.createTextNode(getCookie("name") + " commented " + getCookie("comment"));
        div.appendChild(text);
        document.body.appendChild(text);
    }
}

function myfunction() {
    var name = document.forms["myform"]["name"].value;
    var comment = document.forms["myform"]["comment"].value;
    var div = document.createElement("div");
    var text = document.createTextNode(name + " commented " + comment);
    div.appendChild(text);
    document.body.appendChild(text);
    if (!checkCookie("name")) {
        setCookie("name", name, 365);
        setCookie("comment", comment, 365);
    }
}

function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function checkCookie(cookie) {
    var flag = getCookie(cookie);
    if (flag != null && flag != "") {
        return true;
    }
    return false;
}

Upvotes: 0

Head
Head

Reputation: 568

Sounds like you might even want something like this:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple-web-based-chat-application/

Try this, i'm using jquery though: http://jsfiddle.net/sVgxa/

HTML:

<textarea id="input"></textarea>
<button id="submit">Enter</button>
<div id="newDivs"></div>

Javascript:

$('#submit').click(function() {
   var text = $('#input').val();
   $('#newDivs').append('<div>' + text + '</div>');
});

If you want something that shows up between different users you will need something more complicated using Ajax.

Upvotes: 3

Related Questions