Question

Here is a simple chunk of code:

1  var selected_clone = selected.clone();
2  alert(selected_clone.text());
3  var new_value = selected_clone.text();
4  form_li.find('input.ajax_selection').val(new_value);

Now.

Line 2 (debugging) outputs exactly the value I expect it to.
Line 3 is redundant, I know, but I used it for testing: when passing an arbitrary string to new_value, the val in line 4 works perfectly.
It does not change the value if I assign it the result of selected_clone.text()

The question is: why does it behave in such a puzzling way?

From chrome’s debugging console, just chilling silence.

---

Additional info:

• typeof(new_value) is string;
• the value in the form field is actually updated: the value attribute, however is not.
• about the latter point: no, it’s not my debugger. the values sent on submit are non-updated.
• the request sends the unupdated value; while the form displays the updated one.
  

  ---

Holy Shitzu this is weird.

I solved the problem by changing line 4 to: form_li.find('input.ajax_selection').attr('value',new_value);.

That does not make the slightest amount of sense to me though, and I would still like to know why.

Answer 1

The answer to your new question can be found in that question: .prop() vs .attr()

To understand you will need to know that val() is a shortcut to prop(‘value’)