Tutorial :Set new id with jQuery


"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.


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?


Did you try


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'                });  


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').

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »