Create/display A New Div Each Time Text Is Submitted By A User

I want to display the content of a text field in a new div when it is submitted, every time the submit button under the text field is clicked I'd like a new div created. For exampl

Solution 1:

I believe I've created an example of what you want using jquery: 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>');
});

As trims said, if you want something that shows up between different users you will need something more complicated using Ajax.

Solution 2:

if you can use jQuery then -

HTML -

<input id="text-box" value="" />
<button id="submit">Submit</button>
<div id="message-wrapper"></div>

JavaScript -

$(document).ready(
        function() {
            $("#submit").click(
                    function() {
                        $("<div>" + $("#text-box").val() + "</div>").appendTo(
                                "#message-wrapper");
                    })
        });

Solution 3:

What you describe look like simple Ajax Web Chat application. Using just javascript will be not enough to get what you want. You could check this example: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple-web-based-chat-application/ Or google for how to create Ajax Chat application. There is a lot of good examples of how to create such app using different programming languages.