CODEWITHSUNDEEP
jqueryajax
Cineno28
Cineno28

Reputation: 909

JQuery Ajax autosave for textareas

I've been able to get my autosave to work fine for input boxes and select boxes. I'm trying to use the same process for textareas but it's not working for me. I'm not sure if the same process can be used. I also have tinymce as an htmleditor for my textareas so I'm not sure if that's causing an issue.

Here's an example of my code. I'm doing this within a classic ASP page.

<textarea id="Com<%=QuesID%>" row= "1" cols= "120" name="Com<%=QuesID%>" QuesID=<%=QuesID%> wrap tabindex="21" rows="10" class="formTxt"><%=TempTxt%></textarea>

Then at the bottom of the page:

<script>
$(document).ready(function(){
        $('select').live('change',function () {
                 var itemValue = escape($(this).val());
                var itemName = $(this).attr('name');
                var QuesID = $(this).attr('QuesID');
                var typeID = "select";
                //alert(statusVal);
                $.ajax({
                         type: "POST",
                         url: "PAFormAJAX.asp",
                         data: 'itemValue=' + itemValue + '&itemName=' + itemName + '&QuesID=' + QuesID + '&typeID=' + typeID,
                         success: function(msg) {
                             $('#autosavenotify').text(msg);
                         }
              })
          });

          $('input').live('change',function () {
                 var itemValue = escape($(this).val());
                var itemName = $(this).attr('name');
                var QuesID = $(this).attr('QuesID');
                var typeID = "input";
                //alert(statusVal);
                $.ajax({
                         type: "POST",
                         url: "PAFormAJAX.asp",
                         data: 'itemValue=' + itemValue + '&itemName=' + itemName + '&QuesID=' + QuesID + '&typeID=' + typeID,
                         success: function(msg) {
                             $('#autosavenotify').text(msg);
                         }
              })
          });

          $('textarea').live('change',function () {
                var itemValue = escape($(this).val());
                var itemName = $(this).attr('name');
                var QuesID = $(this).attr('QuesID');
                var typeID = "textarea";
                //alert(statusVal);
                $.ajax({
                         type: "POST",
                         url: "PAFormAJAX.asp",
                         data: 'itemValue=' + itemValue + '&itemName=' + itemName + '&QuesID=' + QuesID + '&typeID=' + typeID,
                         success: function(msg) {
                             $('#autosavenotify').text(msg);
                         }
              })
          });


});
</script>

The saving was working fine for inputs and select boxes, so I'll leave out the PAFormAjax.asp code. Am I able to autosave with textareas like this? If not, do you have any tips for what I need to change?

Thanks for any help!

Upvotes: 0

Views: 3984

Answers (3)

Henrik Karlsson
Henrik Karlsson

Reputation: 5723

This is only valid for very old jQuery versions, see the end of this post.

.val() is only for input elements, textareas use .text().

This is because jQuery just check the value attribute of the element, which isn't used for textareas:

<textarea value="Some text here"></textarea>

That won't work, you have to use it like this instead:

<textarea>Some text here</textarea>

In very old versions of jQuery, val was simply defined as this, which only would work for values (extract from jQuery 1.1.1):

val: function( val ) {
        return val == undefined ?
            ( this.length ? this[0].value : null ) :
            this.attr( "value", val );
    }

Upvotes: 1

mikevoermans
mikevoermans

Reputation: 4007

Is there a reason you don't opt to serialize the whole form? and just handle the processing page appropriately? http://api.jquery.com/serialize/

$(document).on('change', function () {
  $.ajax({
    type: "POST",
    url: "PAFormAJAX.asp",
    data: $('form').serialize(),
    success: function(msg) {
        $('#autosavenotify').text(msg);
    }
  });
}, 'select, input, textarea');

I'm making some assumptions in the pasted code - replace what you need and try to use a better selector than $(document) if you can - I assume you're using .live because you're working with a DOM that has been modified in some way.

Upvotes: 0

jornare
jornare

Reputation: 2893

Try using

encodeURIComponent($(this).text());

for textareas

Upvotes: 1

Related Questions