Subodh Joshi Subodh Joshi - 5 months ago 8
Javascript Question

Jquery :How to store textbox value clientside and display?

The below code will update the display value enter by user in textbox when button clicked but in this code it will not preserve the previous value enter by user .

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="textDiv"></div> -
<div id="dateDiv"></div>


jQuery(function(){
$("button").click(function() {
var value = $("#txt_name").val();
$("#textDiv").text(value);
$("#dateDiv").text(new Date().toString());
});
});


Now I want preserve all the value enter by user and when user will submit the button show both value previous as well as current.

How to achieve this ?

Can below code will help to preserve all the value

var $input = $('#inputId');
$input.data('persist', $input.val() );


If yes how to display all value previous,current etc. when user click on button ?

Answer

If i got this right, this is what you need?

<h1>Type your comment below </h1>

<input id="txt_name" type="text" value="" />

<button id="Get">Submit</button> 

<script type="text/javascript">
    jQuery(function(){
    $("button").click(function() {
      var value = $("#txt_name").val(); 
      $("#section").prepend('<div class="textDiv">'+value+'</div>')
      $("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
      $("#txt_name").val('');
    });
});
</script>

<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>