jQuery .val() not updating on submit.

Question

I have the following values from a form being accessed by jQuery using .val():

var un0 = $("input.e0").val();
var un1 = $("input.e1").val();
var un2 = $("input.e2").val();
var un3 = $("textarea.e3").val();

The original values in those from elements have been added earlier on by a different script that loops the values from AJAX XML data.

The trouble is that when I edit the values in the form (i.e. overwrite them) and submit the form to update my db, the original values, rather than the updated values are sent. It's as if the new values are being ignored by .val(). If I test what is being posted from the form with an alert(un0); the newly edited value is not retrieved and I can see that the original is being used.

Note. This isn't the case for the textarea (un3) which is working correctly, and updates with a new value on edit.

Any ideas why jQuery isn't using the new .val() of the inputs?

Edited with more source:

Values are set in a previous code block after an XML call from the db. This is executed when an item is clicked.

// Construct the output info (for both read and write)
    for (var i = 0; i < field_count; i++){
     data = eval("r" + i);
     $(".r"+i).replaceWith("<span class=\"r" + i + "\">" + data + "</span>");
     $(".e"+i).attr("value", data);
}

Then the read-only version is displayed. This had a link that toggles the read-only version off and the form with the same values in it on.

Then on submit jQuery calls the overwrite function:

$(".overwrite").click(function() {

// Other conditionals, then ...

if (category=="3"){
    // phone
    var un0 = $("input.e0").attr('value');
    var un1 = $("input.e1").attr('value');
    var un2 = $("input.e2").attr('value');
    var un3 = $("textarea.e3").val();

    // Encode each using myKey
    e0 = Passpack.encode("AES",un0,myKey);
    e1 = Passpack.encode("AES",un1,myKey);
    e2 = Passpack.encode("AES",un2,myKey);
    e3 = Passpack.encode("AES",un3,myKey);

    queryString = 'user_id=' + user + '&cat_name=' + cat_name + '&id=' + item_no + '&v1='+ e0 + '&v2=' + e1 + '&v3=' + e2 + '&v4=' + e3;

}

// Other conditionals, then …

// Call edit.php to make update on db
    $.ajax({
    type: "POST",
    url: "app/edit.php",
    data: queryString,
    success: function() {  
     $("#edit_" + cat_name).hide();
     $("#delete_success").hide();
     $("#right_read").show();
     $("#write_success").show();
     $("#read_" + cat_name).show();
     get_list(0,category);
     read_db(category,item_no);
    }
    });
    time_out();
    return false;
});

The values in the form, after editing aren't updated and the submission uses the original values set by the code above.

Answer 1

You can do sth like this to get the values AFTER you click the button:

$('submit').click(function() {
   var un0 = $("input.e0").val();
   var un1 = $("input.e1").val();
   var un2 = $("input.e2").val();
   var un3 = $("textarea.e3").val();
});

Answer 2

Open firebug addon in firefox, and inspect the AJAX request that is being sent. Is it actually passing the same variables at both requests? Place an alert('something unique') after every place where you assign something to the queryString variable, and then alert(queryString) just before the AJAX post.

You're either not hitting your condition, or something else is overwriting it. $.ajax() isn't broken =)

Answer 3

I've put this one down to a mystery. Yesterday I backtracked and revisited the logic of this particular part of my app and it's now working. Sweeping up and starting again was a good move.

Thanks, all, for helping me out. Very much appreciated.

Mark.

Answer 4

hey, i maybe late to the party, but i was working on this same issue, and here is the js code that worked for me:

$('.matcher').each(function(){
   var idt = $(this).attr('rel');
   $(this).click(function(){
     var baseval=$('#base_'+idt).attr('value');
     $.post("t_softmatch_p.php",
     { base: baseval, 
      iding: idt
     });
     //alert(baseval + idt);
     $(this).hide();
   })//end click        
   });//end each

and here is the HTML form i have, dumping in content from a DB in a loop,

echo "<form name=\"f_$iding\" id=\"f_$iding\" action=\"\" method=\"post\">
 ";
echo "".($m+1).") <input type=\"hidden\" name=\"iding\" id=\"iding\" value=\"$iding\">
 ";
echo "<input type=\"text\" name=\"ing_$iding\" id=\"ing_$iding\" value=\"$ingword\"> ==> 
 ";
echo "<input type=\"text\" name=\"base_$iding\" id=\"base_$iding\" value=\"$baseword\">  
 ";

echo "<input type=\"button\" name=\"matcher\" id=\"matcher\" class=\"matcher\" title=\"matcher\" value=\"Make match\" rel=\"$iding\">
"; 
echo "</form><br>
";