"this" is a text field, "new_id" is an integer.
When I apply the following snippet:
$(this).attr('id', this.id + '_' + new_id);
$(this).attr('name', this.name + '_' + new_id);
$(this).attr('value', 'test');
the id changes, the name changes too, but not the value. If I change the last line to this (and therefore use a string literal)
$('#mytextfield_3').attr('value', 'test');
it works.
Any ideas?
-- EDIT -- Thanks to Steerpike for the quick plugin test - i believe it should work, but i can't find the error.
Here's some more code:
I create the clone using
clone = $(this).find('.clone_fields_container:first').clone();
"clone" now contains a div which has embedded input fields.
After generating a new id:
/** Iterate over input and select fields in container */
clone.children('input,select,textarea').each(function() {
$(this).attr('id', this.id + '_' + new_id);
$(this).attr('name', this.name + '_' + new_id);
$(this).val('test');
console.log(this);
});
The text fields do not have any values.
This question is related to
javascript
jquery
I just wrote a quick plugin to run a test using your same snippet and it works fine
$.fn.test = function() {
return this.each(function(){
var new_id = 5;
$(this).attr('id', this.id + '_' + new_id);
$(this).attr('name', this.name + '_' + new_id);
$(this).attr('value', 'test');
});
};
$(document).ready(function() {
$('#field_id').test()
});
<body>
<div id="container">
<input type="text" name="field_name" id="field_id" value="meh" />
</div>
</body>
So I can only presume something else is going on in your code. Can you provide some more details?
EDIT: based on your comment and assuming that this is the element that is cloned.
$(this).clone()
.attr( 'id', this.id + '_' + new_id )
.attr( 'name', this.name + '_' + new_id )
.val( 'test' )
.appendTo('#someElement');
Full Example
<script type="text/javascript">
var new_id = 0;
$(document).ready( function() {
$('#container > input[type=button]').click( function() {
var oldinp = $('input#inp')[0];
var newinp = $(oldinp).clone()
.attr('id',oldinp.id + new_id )
.attr('name',oldinp.name + new_id )
.val('test')
.appendTo($('#container'));
$('#container').append('<br>');
new_id++;
});
});
</script>
<div id="container">
<input type="button" value="Clone" /><br/>
<input id="inp" name="inp" type="text" value="hmmm" /><br/>
</div>
Use .val() not attr('value').
Did you try
$(this).val('test');
instead of
$(this).attr('value', 'test');
val() is generally easier, since the attribute you need to change may be different on different DOM elements.
What happens when you set all of the attributes in one attr() command like so
$(this).attr({
id : this.id + '_' + new_id,
name: this.name + '_' + new_id,
value: 'test'
});
Source: Stackoverflow.com