HTMLTextAreaElement.onchange

Question

My code is very long and I will keep it very short, I am creating a div which has edit text thing and when I press edit the div get invisible and textarea comes, then if we make change to it it fires an onchange that execute a function update,which happens at first time , but If I try to do it for second time it gives me error that the update function doesn't exist let me show some code.

HTML

<textarea id='input_val_q' style='width:350px;height:50px;' onchange='update(q)' autofocus></textarea>

JS

function update(hint) {
  update = $('#input_val_' + hint + '').val(); 
  $.ajax({
    type: "POST",
    url: "profile/update_data/" + hint + "",
    data: {
      data: update
    },
    cache: false,
    success: function(html) {
      $('#material_' + hint + '').html(update);
    }
  }); 
}

Answer 1

You are overwriting the function with a variable. See the problem area

function update(hint) {
   update = $('#input_val_' + hint + '').val(); 
 //^^^^^

Thus you are getting the error. You just need to just rename the variable.

function update(hint) {
    var text = $('#input_val_' + hint + '').val();
    $.ajax({
        type: "POST",
        url: "profile/update_data/" + hint + "",
        data: {
            data: text 
        },
        cache: false,
        success: function(html) {
            $('#material_' + hint + '').html(text );
        }
    });
}

Answer 2

In your code it seems you are using both function and global variable name as 'update'.

function* * update * * (hint) { * * update * *= $('#input_val_' + hint + '').val();
  $.ajax({
    type: "POST",
    url: "profile/update_data/" + hint + "",
    data: {
      data: update
    },
    cache: false,
    success: function(html) {
      $('#material_' + hint + '').html(update);
    }
  });
}

better you change one of them. without var assigned to any variable becomes global to the app. better to keep distinct name for function and variable.

Answer 3

<textarea id='input_val_q' style='width:350px;height:50px;' onchange='update_function(q)' autofocus></textarea>
<script>
    function update_function(hint) {
        update = $('#input_val_' + hint + '').val();
        $.ajax({
            type: "POST",
            url: "profile/update_data/" + hint + "",
            data: {
                data: update
            },
            cache: false,
            success: function(html) {
                $('#material_' + hint + '').html(update);
            }
        });
    }
</script>

Change the update function name to something like update_function since you are using the another variable with the same name. Always try to use a specific format for functions like camel casing etc and variables.