jQuery, wont change value but will change any othere attribute...

Question

function send_mail( token, loader ) {
 $(".send_mail").bind( "click", function() {
  try{
   var to = $(this).attr('ref');
   var mail_form = $("#mail_form");
   mail_form.find("li:eq(0) input").val("sdsds");
   //mail_form.find("li:eq(0) input").attr("ref", "sdsds");
   //mail_form.find("li:eq(0) input").attr("value", "sdsds");
   $.fancybox(mail_form.html(), { 'autoDimensions' : false, 'width' : 360, 'height' : 200, 'transitionIn' : 'none', 'transitionOut' : 'none', 'scrolling' : 'no', 'showCloseButton' : false });
   return false;
  }catch(err){alert(err);}
 });
}

My problem being that the above will not work yet if I use

//mail_form.find("li:eq(0) input").attr("ref", "sdsds");

it will change the ref and even

//mail_form.find("li:eq(0) input").attr("value", "sdsds");

will not work...

Any ideas whats happening here?

Answer 1

jQuery uses elem.value = ... and elem['value'] = ... when setting the value attribute using val() and attr, respectively. These methods don't change the actual HTML when it comes to the value attribute. Therefore, when you create the fancybox out of mail_form.html(), you're getting the original value attribute values, as they are still present in the HTML.

However, setAttribute() does change the underlying HTML value attribute. Try adding this after changing the values to sdsds and before calling $.fancybox(...):

mail_form.find("li:eq(0) input").each( function() {
    this.setAttribute("value",$(this).val());
});