Tutorial :Set new id with jQuery



Question:

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


Solution:1

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?


Solution:2

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.


Solution:3

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


Solution:4

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>  


Solution:5

Use .val() not attr('value').


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