Form retains the previous data

Question

<script type="text/javascript">


$(document).ready(function(){

var count=$('#option1').val(); 
var counter = 1;

$("#addButton").click(function () {

if(counter>count){
        alert("Only "+count+" textboxes allow");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<input type="radio" name="answer" id="answer" value="' + counter + '" /><label>Option #'+ counter + ' : </label>' +
      '<textarea name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" />');

newTextBoxDiv.appendTo("#TextBoxesGroup");

tinymce.init({
        selector: "textarea",
        force_p_newlines : false,


    plugins: [
            "advlist autolink autosave image link  lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
    ],

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media | inserttime preview ",
    toolbar2: "forecolor backcolor | table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft ",

    image_advtab: true,
    menubar: false,
    toolbar_items_size: 'small',

    style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],

        templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
        ]

});
//add tinymce to this
tinyMCE.execCommand("mceAddControl", false, 'txt'+counter);

    counter++;
});

</script>




<form method="post" name="myForm" id="form" action="upload"  onsubmit="return validateForm()" >
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv0">
        <label>Selection: </label><select name="sel" id="sel" >
          <option selected="true" style="display:none;">Select </option>
 <%  
  ResultSet rsta1=st.executeQuery("SELECT DISTINCT term FROM termwhere term not like 'null'"); 
  while(rsta1.next()) {
      out.write("<option value=" + rsta1.getString("term") + ">" + rsta1.getString("term") + "</option>");
  }
%> 
        <label>Question: </label><textarea id='textbox0' name="textbox0"></textarea>
        <input type="hidden" name="option1" id="option1" value="<%=options21 %>"/>
    </div>
</div>
<input type='button' value='Add Button' id='addButton' />
<input type='button' value='Remove Button' id='removeButton'/>
<input type='submit' value='Submit'/>
 </form>

I have a Jquery above which when I press add button,more text areas appear.This works fine,the submission of this page also works.Problem arises when I come back the next time.

All the data previously fed into the textareas appear again,the same old data gets populated in the textareas. What should I do so that the form fields are empty?

One more problem I get is when I add new text fields the data gets refreshed to the old data.for example.

when i add text in one textarea and press the add button the text I had typed disappears or the previous text appears(my 1st problem as I explained above).Similarly when I press the add button again the previous 2 textfields get emptied or the previous text appears. Why is this happening?

Answer 1

try to add autocomplete=off on your form to prevent your browser from retaining the information

See -> https://developer.mozilla.org/en-US/docs/Mozilla/How_to_Turn_Off_Form_Autocompletion

OR

empty the form using javascript

formObject.reset()